react---jsx列表输出

在jsx中直接写插值表达式,是以tostring的方式展现出来。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var users = ['a','b','c']
      ReactDOM.render(
        <div>
          <ul>
            <li>{users}
            </li>
          </ul>
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

那么,如果我们想根据数组内容生成一个包含有结构的新数组,怎么办呢?

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var users = ['a','b','c']
      ReactDOM.render(
        <div>
          <ul>
            {users.map((user,index)=>{
              return <li key={index}>{user}</li>
            })
            }
          </ul>
        </div>, 
        document.getElementById('example')
      );
    </script>
  </body>
</html>

推荐阅读更多精彩内容