类组件传值
对于class的组件,父组件可以把值当成属性传给子组件,子组件用this.props取值。例
父组件:
import Child from 'Child';//引入子组件
class Father extends React.Component {
//父组件要传递给子组件的函数
func = () => {
console.log("父组件")
}
render() {
return <Child func=this.func>
}
}
子组件:
class Child extends React.Component {
handleClick = () => {
const {func}=this.props;
func();
}
render() {
return <button onclick={this.handleClick}>子组件</button>
}
}
函数组件传值
对于函数的组件,父组件也可以把值当成属性传给子组件,子组件用在构造(?)的时候传入props,从props取值。例
父组件:
import Child from 'Child';//引入子组件
const Father =() => {
//父组件要传递给子组件的函数
const func = () => {
console.log("父组件")
}
return <Child func=func>
}
子组件:
const Child = (props)=> {
const handleClick = () => {
const {func}=props;
func();
}
return <button onclick={this.handleClick}>子组件</button>
}
用属性传值的话大概是这样的=_=