React中父子组件的传值.

174 阅读1分钟

正所谓一句话说得好,父传子,子调父,不传函数怎么子调父

// 父向子传值

class Parent extends Component {  constructor(props) {    super(props);    this.state = {
          name:'YuMI' 
    }  }  render() { 
    const {propsName} = this.state 
    return (         <div>           <Childern  propsName = {propName}/>       </div>     );  }}

// 子组件 class Childern extends Component {  constructor(props) {    super(props);    this.state = {}  }  render() {     return (        <div>          <div>              {this.props.propsName}          </div>      </div>    );  }}

子向父组件传值

//父组件class Parent extends Component {  constructor(props) {    super(props);    this.state = {          name:'YuMI'     }  }

  address = (users) => {    this.setState({users})  }  render() {    return (       <div className = "todostyle">           <Childern  address = {this.address}/>       </div>    );  }}// 子组件class Childern extends Component {  constructor(props) {    super(props);    this.state = {}  }
  handle () => {
     this.props.address('a')
  }  render() {     return (        <div>          <button  onClick = {this.handle} > </button>      </div>    );  }}