react父子组件相互传参

父组件往子组件传参

可以通过props属性传参

// children component
import React, {Component} from 'react';

class Children extends Component{
	render(){
		<p>{this.props.title}</p>
	}
}
export default Children;

// parent component
import React, {Component} from 'react';
import Children from './Children';
class Parent extends Component{
	render(){
		<div>
			<Children title='我是父组件传入的' />
		</div>
	}
}
export default Children;

子组件往父组件传值

通过回调函数的方式，父子间将回调函数以props数据形式传入，子组件再调用即可。

// children component
import React, {Component} from 'react';
class Children extends Component{
  test = ()=>{
    this.props.call('我是子组件传给父组件的');
  };
  render() {
    return (
        <div className="App">
          <button onClick={this.test}>显示</button>
        </div>
    );
  }
}
export default Children;

// parent component
import React, {Component} from 'react';
import Children from './Children.jsx';
class Parent extends Component{
  constructor(){
    super();
    this.state = {
        test: '我是父组件显示的'
    }
  }

  call = (str)=>{
      this.setState({
        test: str
      })
  };
  render() {
    return (
        <div>
          {this.state.test}
          <Children call={this.call} />
        </div>
    );
  }
}
export default Parent;