lovecoding
/
VIP20


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表渲染</title>
    <script src="../../babel.min.js"></script>
    <script src="../../react.development.js"></script>
    <script src="../../react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function App() {
        return (
          <div className="app">
            <MyList />
          </div>
        );
      }

      class MyList extends React.Component {
        constructor() {
          super();
          this.state = {
            list: [1, 2, 3, 4],
          };
        }

        render() {
          let { list } = this.state;
          // 期望
          // let element = (
          //   <ul>
          //     <li>1</li>
          //     <li>2</li>
          //     <li>3</li>
          //     <li>4</li>
          //   </ul>
          // );

          // let element = (
          //   <ul>
          //     {/* 直接渲染数组 数据 会发生什么？*/}
          //     <li>{list}</li>
          //     {/* <li>{{ name: 'gg' }}</li> */}
          //   </ul>
          // );
          // let ml = [<li>1</li>, <li>2</li>, <li>3</li>, <li>4</li>];
          // list = [1, 2,3,4]
          // 思考 list => ml ?

          let ml = list.map((item, index) => <li key={index}>{item}</li>);

          return <ul>{ml}</ul>;
        }
      }

      const root = ReactDOM.createRoot(document.querySelector('#root'));
      root.render(<App />);
    </script>
  </body>
</html>