React Nativeの親コンポーネントから子関数を呼び出す

Question

私は最初のReact Nativeアプリケーションを開発しています。

子供

export default class Child extends Component { 
    ... 
    myfunct: function() { 
    console.log('Managed!'); 
    } 
    ... 
    render(){ 
    return(
     <Listview 
     ... 
     /> 
    ); 
    } 
} 

親

export default class Parent extends Component { 
    ... 
    execChildFunct: function() { 
    ... 
    //launch child function "myfunct" 
    ... 
    //do other stuff 
    } 

    render(){ 
    return(
     <View> 
     <Button onPress={this.execChildFunct} /> 
     <Child {...this.props} /> 
     </View>); 
    } 
} 

この例では：私は何を達成しようとしていることは親コンポーネントから子関数を実行することで、これは状況です親クラスのボタンを押すと、'Managed!'を記録したいと思います。どのように実現可能ですか？

Answer 1

あなたは子コンポーネントに参照を追加することができます。私はあなたがコンポーネントの構造について何かを誤解していると思います

<Button onPress={this.refs.child.myfunc} /> 

Answer 2

：

<Child ref='child' {...this.props} /> 

次に、このような子にメソッドを呼び出します。

あなたの子供はあなたの他のコンポーネント用のボタンを生成するコンポーネントだとします。この階層では、あなたの子供はそれが押されたことを親に知らせなければなりません。

子----->あなたのためのボタンを生成するために、あなたの親コンポーネントの使用の子コンポーネントに親

export default class Child extends Component { 

    return(
    <Button onPress={this.props.onPress } /> 
    ); 
    } 

。このようにして、子コンポーネントを他のコンポーネントと独立したボタンとして使用できます。 REFに文字列リテラルを使用してhas been deprecated属性以来

export default class Parent extends Component { 
constructor(props) { 
    super(props); 
    this.execChildFunct=this.execChildFunct.bind(this) 
    } 

    execChildFunct: function() { 
    console.log('Managed!'); 
    } 
    return (
    <Child onPress = {this.execChildFunct}></Child> 
) 

} 

Answer 3

ネーダーダビットの答えは、時代遅れです。これは、我々が2017年9月の時点でそれを行う方法は以下のようになりますが、代わりにコンポーネントを参照するように文字列を使用しての

<Child ref={child => {this.child = child}} {...this.props} /> 
<Button onPress={this.child.myfunc} /> 

同じ機能が、我々は代わりにグローバル変数に格納します。あなたの関数は、任意の押しトリガによって呼び出されていない場合は

Answer 4

、あなたはそれがである反応例

componentDidMount(){ 
    this.props.yourFunction() 
} 

Answer 5

this.props.yourFunction() 

使用することができます。それがあなたを助けることを願っています。

class Child extends React.Component { 
    componentDidMount() { 
    this.props.onRef(this) 
    } 
    componentWillUnmount() { 
    this.props.onRef(null) 
    } 
    method() { 
    console.log('do stuff') 
    } 
    render() { 
    return <h1>Hello World!</h1> 
    } 
} 

---

class EnhancedChild extends React.Component { 
     render() { 
     return <Child {...this.props} /> 
     } 
    } 

class Parent extends React.Component { 
    onClick =() => { 
    this.child.method() // do stuff 
    }; 
    render() { 
    return (
     <div> 
     <EnhancedChild onRef={ref => (this.child = ref)} /> 
     <button onClick={this.onClick}>Child.method()</button> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Parent />, document.getElementById('root')) 

オリジナルソリューション：

https://jsfiddle.net/frenzzy/z9c46qtv/

https://github.com/kriasoft/react-starter-kit/issues/909