どのように親状態をその子コンポーネントに渡すのですか？

Question

私はReact ES6で新しく、私は間違った方法で状態を変更していると思います。私は親コンポーネントに状態を設定すると私のコードは次のようである：私の問題は、他の子コンポーネントである

class App extends React.Component { 
constuctor(props) { 
    super(props); 
    this.state = {name:"helloworld"}; 
} 
render() { 
    return( 
    <ChildComponent parentObj={this} /> // parentObj for parent context as props on child components 
); 
} 
} 

、私はrepeatitivelyそれをしなければならない、それを行うための別の方法は何ですか？私はReact.createClassに問題はありませんが、私はこの問題を抱えているので、es6でコーディングしたいと思います。

Answer 1

そのようにそれを行う：

class App extends React.Component { 
constuctor(props) { 
    super(props); 
    this.state = {name:"helloworld"}; 
} 
render() { 
    return( 
    <ChildComponent {...this.state} /> 
); 
} 
} 

とあなたがすることができる子コンポーネントで：

<Text>{this.props.name}</Text> 

しかし、あなたがそれに部品の小道具を渡したい場合は、子供の：

class App extends React.Component { 
    constuctor(props) { 
     super(props); 
     this.state = {name:"helloworld"}; 
    } 
    render() { 
     return( 
     <ChildComponent {...this.props} /> 
    ); 
    } 
    } 

とあなたがすることができる子コンポーネントで：

<Text>{this.props.stuff}</Text>//place stuff by any property name in props 

子コンポーネントから親コンポーネントの状態を更新する場合は、子コンポーネントに関数を渡す必要があります。

class App extends React.Component { 
    constuctor(props) { 
     super(props); 
     this.state = {name:"helloworld"}; 
    } 
    update(name){ 
     this.setState({name:name})// or with es6 this.setState({name}) 
    } 
    render() { 
    return( 
     <ChildComponent {...this.props, update: this.update.bind(this)} /> 
    ); 
    } 
    } 

、その後、子コンポーネントには、これを使用することができます。this.props.update('new name')

UPDATE

（[国を持ち上げ]よりES6を使用して、コンストラクタ

class App extends React.Component { 
    state = {name:"helloworld"}; 

    // es6 function, will be bind with adding .bind(this) 
    update = name => { 
     this.setState({name:name})// or with es6 this.setState({name}) 
    } 

    render() { 
    // notice that we removed .bind(this) from the update 
    return( 
     <ChildComponent {...this.props, update: this.update} /> 
    ); 
    } 
    } 

Answer 2

あなたは全体の状態送信したい場合：

return(<ChildComponent {...this.state} />); 

をしかし、これはおそらく悪いアイデア:)

編集です：あなたのシナリオでは、これはと子コンポーネントに「名前」プロパティを送信値あなたが状態{名： "HelloWorldの"}を渡したい場合は 'HelloWorldの'