react生成动态内容

效果：

代码结构：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App2 from './App2';

ReactDOM.render(<App2 />, document.getElementById('root'));

Todo2.js

import React from 'react';

export default class Todo2 extends React.Component {
 
  constructor(props) {
    super(props);
  }
  deleteThis(){
  	let {deleteUl,index}=this.props;
  	if(window.confirm("确认删除？")){
  		deleteUl(index);
  	}
  }
  editThis(){
  	let{editUl,index}=this.props;
  	editUl(index);
  }
   render() {
    return (
    	<React.Fragment>
	      <div>
	      	<ul  className="list">
		      	<li>
		      		{this.props.content_name}
	      		</li>
	      		<li>--</li>
	      		<li>
		      		{this.props.content_post}
	      		</li>
	      		<li>
		      		<button onClick={this.editThis.bind(this)}>编辑</button>
	      		</li>
	      		<li>
					<button onClick={this.deleteThis.bind(this)} >删除</button>
	      		</li>
	      	</ul>
	      	
	      </div>
	    </React.Fragment>
    );
  }
}

App2.js

import React from 'react';
import Todo2 from './Todo2';
export default class App2 extends React.Component {
  constructor(props) {
    super(props);
   	this.state={
   		input_name:'',
    	input_post:'',
    	list:[
    		{"name":"张三","post":"校长"},
    		{"name":"王五","post":"主任"}
    	],
    	editStatus:-1,
    	
   	}
  }
  deleteUl(e,index){
  	let list=this.state.list;
  	list.splice(index,1);
      this.setState({
        list:list 
      });
  }
  editUl(index,e){
  	let list=this.state.list;
  	
  	this.setState({
  		input_name:list[index].name,
  		input_post:list[index].post
  		})
  	this.state.editStatus=index;
  }
  input_name_change(e){
  	 this.setState({   
      input_name:e.target.value 
    })
  }
  input_post_change(e){
  	 this.setState({   
      input_post:e.target.value 
    })
  }
  addUser(e){
  	let user={"name":this.state.input_name,"post":this.state.input_post};
  	let list=this.state.list;
  	if(this.state.input_name.length!=0 && this.state.input_post.length!=0){
  		console.log(this.state.input_name);
  		if(this.state.editStatus!=-1){
  		list[this.state.editStatus].name=this.state.input_name;
  		list[this.state.editStatus].post=this.state.input_post;	  

	  	}else{
	  		list.push(user);
	  		}
	  	this.setState({
		  	list:list,
		  	input_name:'',
		  	input_post:''
		  	})
	  	}else{
	  		alert("姓名和职务不能为空");
	  	}
  	
  	
  }
  render() {
    return (
      <div className="App2">
      	<div className="form">
      		姓名：<input value={this.state.input_name} onChange={this.input_name_change.bind(this)}/>
      		<br />
      		职务：<input value={this.state.input_post} onChange={this.input_post_change.bind(this)}/>
      		<br />
      		<button onClick={this.addUser.bind(this)} >添加</button>
      	</div>

      	<div className="content">
      		<ul>
      			{
      				this.state.list.map((item,index)=>{
      					return(
      						<Todo2
      							 key={index} 
                 				 content_name={item['name']} 
                 				 content_post={item['post']}
                 				 index={index} 
                 				 deleteUl={this.deleteUl.bind(this)}
                 				 editUl={this.editUl.bind(this)}
      						 />
      					)
      				})	
      			}
      		</ul>
      	</div>
      </div>
    );
  }
}

index.css

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.content .list li{
	float: left;
	list-style: none;
	width: 200px;
	height: 40px;
	line-height: 40px;


}
.content .list li button{
	display: inline-block;
	border: 0px;
	background-color: #029AE5;
	color: white;
	width: 80px;
	height: 40px;


}
.content .list {
	overflow: hidden;
	cursor: pointer;
	background-color: #DF6464;
	

}

其中事件绑定this可以写在构造其中，

this.input_name_change=this.input_name_change.bind(this);

react渲染时最外层需要用div标签包起来，如果不想显示那层div，在外层加上一个<React.Fragment>标签即可。