首页 | 简单教程,简单编程

代码编辑器：

<!doctype html>
<meta charset="utf-8">
<title>React Keys -简单教程</title>
<script src="https://cdn.staticfile.org/react/15.5.4/react.min.js"></script>
<script src="https://cdn.staticfile.org/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
   constructor() {
      super();

this.state = {
data: [
   {
      component: '首先...',
      id: 1
   },

{
      component: '其次...',
      id: 2
   },

{
      component: '再次...',
      id: 3
   },
   {
      component: '第八次...',
      id: 8
   }
]
      }

}

render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
ReactDOM.render(<App/>, document.getElementById('root'));
</script>

代码编辑器：

运行结果：