console
var root = document.getElementById('root');
class Test extends React.Component{
constructor(props){
super(props);
}
renderProps(props){
return props.children.map((item,index) => (.log(item) && <li key={index} onClick={this.handleClick.bind(this,`index:${index}`)}>{item}</li>))
}
handleClick(msg,e){
alert(`${msg} --- ${e.target.innerHTML}`)
}
render(){
return(
<ul>{this.renderProps(this.props)}</ul>
)
}
}
var arr = [<div>hello react</div>,'a','b','c']
ReactDOM.render(<Test>{arr}</Test>,root1)
const users = [
{ username: 'Jerry', age: 21, gender: 'male' },
{ username: 'Tomy', age: 22, gender: 'male' }]
const User = (props) => {
const {user} = props
return (
<div>
<div>姓名：{user.username}</div>
<div>年龄：{user.age}</div>
<div>性别：{user.gender}</div>
<hr/>
</div>
)
}
class Index extends React.Component{
render(){
return(
<div>
{users.map((user,index) => {
return(
<User user={user} key={index}/>
)
})}
</div>
)
}
}
ReactDOM.render(<Index/>,root2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
react.js 练习模板
</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">
</script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
<body>
<div id="root1">
</div>
<div id="root2"></div>
</body>
</html>