zoukankan      html  css  js  c++  java
  • react 中文文档案例五 (循环列表)

    function NumberList(props) {
        const numbers = props.numbers;
        const listItems = numbers.map((number) =>
          <li key={number.toString()}>
            {number}
          </li>
        );
        return (
          <ul>{listItems}</ul>
        );
      }
      
      const numbers = [1, 2, 3, 4, 5];
      ReactDOM.render(
        <NumberList numbers={numbers} />,
        document.getElementById('root')
      );
    //key值最好选用id,没有稳定的id的时候选择index
     const todoItems = todos.map((todo) =>
        <li key={todo.id/index}>
            {todo.text}
        </li>
    );
    function Blog(props) {
        const sidebar = (
          <ul>
            {props.posts.map((post) =>
              <li key={post.id}>
                {post.title}
              </li>
            )}
          </ul>
        );
        const content = props.posts.map((post) =>
          <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </div>
        );
        return (
          <div>
            {sidebar}
            <hr />
            {content}
          </div>
        );
      }
      
      const posts = [
        {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
        {id: 2, title: 'Installation', content: 'You can install React from npm.'}
      ];
      ReactDOM.render(
        <Blog posts={posts} />,
        document.getElementById('root')
      );
  • 相关阅读:
    Linux搭建测试环境详细步骤
    MongoDB基本查询
    数据库常用sql语句
    Js apply和call
    js中的事件委托
    javascript中的事件处理
    <a>标签的属性
    js中预加载图片
    Yahoo团队:网站性能优化的35条黄金准则
    js中用到的正则表达式
  • 原文地址:https://www.cnblogs.com/Lolita-web/p/10348219.html
Copyright © 2011-2022 走看看