1. 程式人生 > >react組件之間的參數傳遞

react組件之間的參數傳遞

etc 傳遞 fault return con ole inf import cnblogs

1、父組件向子組件傳遞參數

class Child extends Component {
    componentDidMount(){
      let name = this.props.default;
      console,log(name);
    }
    render(){
      const { default} = this.props;
      return (
        <Input />
      )
}
}
import React, { Component } from ‘react‘;
import Child from ‘./Child‘;

class Parent extends Component {
    state 
= { name: ‘Bob‘ } render() { return ( <div> <Child default={this.state.name} /> </div> ) } }

2、子組件向父組件傳遞參數

class Child extends Component {
    state={
      name:‘Bob‘
    }     componentDidMount(){
      this.props.toParent(this.state.name);
   }
    render(){       return (         <Input />       ) } }
import React, { Component } from ‘react‘;
import Child from ‘./Child‘;

class Parent extends Component {
   state = {
    name:‘‘
} getChildInfo = (name)=>{
     this.setState({name:name});
   }
render() { return
( <div> <Child toParent={this.getChildInfo.bind(this)} /> </div> ) } }

react組件之間的參數傳遞