一定先写 super 可以接收从父组件传来的值
父组件往子组件传值的方法
<ChildComponent nextValue={xxx.xxx} nextValue2={xxx.xxx}/>
直接在组件中写属性名等于属性值就可以, 有多少传多少
在子组件 ChildComponent 中获取父组件传来的值只需要用
this.props.nextValue
就可以得到父组件传来的值
由此衍生一个问题, 子组件如何给父组件传值
首先, 需要在父组件定义一个方法(agechange), 然后将方法传给子组件,
- class App extends Component {
- agechange=(age)=>{
- alert(age)
- }
- render() {
- return (
- <div className="App">
- <Child agechange={this.agechange}/> // 将方法传给子组件
- </div>
- )
- }
- }
在子组件中调用这个方法, 将需要传给父组件的值, 通过这个方法传给父组件,
- class Child extends Component {
- constructor(props){
- super(props)
- this.state=({
- age:0
- })
- }
- handleChange=()=>{
- this.setState({
- age:this.state.age+3
- })
- this.props.agechange(this.state.age) // 将子组件的 age 值传给父组件
- }
- render(){
- return(
- <div>
- <button onClick={this.handleChange.bind(this)}>点击增加 age</button>
- </div>
- )
- }
- }
- 2.componentWillMount
关于 componentWillMount 方法只想说一点, 它的调用在 constructor 之后, 在 render 之前, 在这方法里的代码调用 setState 方法不会触发重渲染
3.componentDidMount
一般的从后台 (服务器) 获取的数据, 都会与组件上要用的数据加载有关, 所以都在 componentDidMount 方法里面作
4.componentWillReceiveProps
当父组件传给子组件的 props 发生改变时, 子组件可以通过 componentWillReceiveProps 方法接收, 可以 setState 重新渲染组件
当父组件通过 ajax 异步获取的值需要传给子组件时, 子组件可以用到 componentWillReceiveProps(nextProps)
关于 setState() 它不是同步的, 也不能说是异步的, 所以不要在 setState 之后, 直接用 state 中的值, 很容易出错.
来源: http://www.bubuko.com/infodetail-2593619.html