React组件通信以及State状态的使用
APP.JS
import React,{ Component } from 'react'
import './App.css';
import Person from './Person/Person'
class App extends Component {
state = {
persons:[
{ name:"张三",count:50 },
{ name:"张三1",count:60 },
{ name:"张三2",count:70 },
{ name:"张三3",count:80 },
],
otherState:"anything"
}
switchNameHandler = ()=>{
this.setState({
persons:[
{ name:"张三",count:10 },
{ name:"张三1",count:60 },
{ name:"张三2",count:70 },
{ name:"张三3",count:80 }
]
})
}
render(h) {
return (
<div className="App">
<h1>hello React!</h1>
<button onClick={this.switchNameHandler}>更改状态</button>
<Person name={this.state.persons[0].name} count={this.state.persons[0].count} />
<Person name="张三1" count="40"/>
<Person name="张三2" count="50"/>
<Person name="张三3" count="60">你好帅！</Person>
</div>
)
}
}
组件person 接收
export default App;
import React from 'react'
const person = ( props )=>{
return(
<div>
<p>你好，{props.name},你有{props.count}个作品</p>
<p>{props.children}</p>
</div>
)
}
export default person;
本文地址：https://blog.csdn.net/qq_35622189/article/details/113988460