Reactコンポーネントとプロパティを共有するには？

Question

私はReactを使い始めました。コンポーネント間でプロパティを共有することについての質問があります。たとえば、他の子コンポーネントに渡すことができる「可視」機能を持つ親コンポーネントが必要です。

例：

CustomInput visible="true"; 
CustomDropDown visible="false" 

私は良い習慣を尊重し、これを行うための最善の方法を知りたいのです。ご協力ありがとうございました！

Answer 1

リアルシンプル。メソッドを小道具として渡すことができます。あなたが親を持っていると仮定し、またはより高次の成分（HOC）は、あなたがこのような何かを行うことができます：

class Parent extends React.Component { 
    logWord = (word) => { 
    console.log(word); 
    } 

    render() { 
    return <ChildComponent handleLogging={ this.logWord } /> 
    } 
} 

その後、ChildComponentに、あなたは、単に小道具からメソッドにアクセスします。

class ChildComponent extends React.Component { 
    render() { 
    return (
     <div onClick={ this.props.handleLog.bind(null, 'Logged!') }>Click me to log a word!</div> 
    } 
    } 
} 

あなたの状態の可視属性を更新し、親に存在していた方法を望んでいたのであれば、あなたの例では、あなたが書くことができる：例えば

class Parent extends React.Component { 
    constructor() { 
     this.state = { 
      visible: false 
     } 
    } 

    setVisible = (bool) => { 
     this.setState({ visible: bool }); 
    } 

    render() { 
     return <ChildComponent updateVisible={ this.setVisible } visible={ this.state.visible } />; 
    } 
} 

ChildComponent：

class ChildComponent extends React.Component { 
    render() { 
    return (
     <div> 
     <div onClick={ this.props.updateVisible.bind(null, true) }>Set me to visible!</div> 
     <div onClick={ this.props.updateVisible.bind(null, false) }>Set me to invisible!</div> 
      { this.props.visible && <div>I'm visible right now!</div> } 
     </div> 
    } 
    } 
}