Parent component subassembly to pass parameters
Crossing by reference 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;
Parent component subassembly to pass values
By way of a callback function, between father and son will be passed to the callback function data in the form of props, sub-assemblies can then call.
// 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;