Question

目前，我有3个组成部分：Child1，Child2和Parent。当按下Child2中的按钮时，我想调用Child1组件中的函数。

这是我到目前为止尝试过的，但是我一直在错误提示

this.refs.child.child2Function is not a function

处理这种情况的正确方法是什么（从另一个子组件中调用一个子组件中的函数）？

我也在项目中使用redux。但是我的Child2组件在多个标签中呈现。因此，我无法使用redux更新值，因为该值将在所有Child2组件中进行更新。

Parent.js

class Parent extends Component{

parentFunction = () => {
    console.log("This line gets printed. But the line below this breaks");
    this.refs.child.child2Function();
}

render() { 
    return (
        <View style={styles.pageContainer}>
             <Child1 ref="child"/>
             <Child2 parentFunc={this.parentFunction}/>
        </View>
 )}

Child2.js

class Child2 extends Component{

render() { 
    return (
        <View style={styles.pageContainer}>
             <Button
                 title="CLICK ME" 
                 onPress={()=>this.props.parentFunc()} />
        </View>
 )}

Child1.js

class Child1 extends Component{

child1Function = () => {
  console.log("Print this");
}

render() { 
    return (
        <View style={styles.pageContainer}>
             <Text>AAAA</Text>
        </View>
 )}

更新：代码在此处设置的小吃示例中正常运行：https://snack.expo.io/rk4Y9RWUm

但是当我的本机应用程序中有类似的解决方案时，我总是会出错。我在此处包括了我的代码，控制台日志和错误消息的屏幕截图：https://drive.google.com/drive/folders/1RQYicEC_wqHKPRCs9pVsMZyuTxyiUbq2?usp=sharing

Answer 1

您不能直接从child2调用child1组件内部的函数。由于child1内部的功能已封装到child1组件中，因此从外部看不到该功能。在两个组件之间进行通信的唯一方法是通过公共父组件。您可以在父组件中声明所需的状态和函数，并将它们作为道具传递给子组件。然后，子组件可以通过从父组件传递的功能来共享和更改这些状态。您可以在共享同一父组件的兄弟组件之间共享状态更改。兄弟组件之间唯一的通信方式是通过通用父组件。下面是示例代码的链接：https://codesandbox.io/s/wom3622q8

代码示例：从“ react”导入React；

const ChildOneComponent ({ number, handleChangeNumber }) => {
  return (
    <div>
      <button onClick={handleChangeNumber}>Change Number</button>
      State in ChildOneComponent is : {number}
    </div>
  );
};
const ChildTwoComponent ({ number, handleChangeNumber }) => {
  return (
    <div>
      <button onClick={handleChangeNumber}>Change Number</button>
      State in ChildTwoComponent is : {number}
    </div>
  );
};


class ParentComponent extends React.Component {
  state = { number: 0 };
  handleChangeNumber = () => {
    let number = this.state.number;
    this.setState(() => ({ number: ++number }));
    console.log("cliked");
  };
  render() {
    return (
      <div>
        <ChildOneComponent
          number={this.state.number}
          handleChangeNumber={this.handleChangeNumber}
        />
        <ChildTwoComponent
          number={this.state.number}
          handleChangeNumber={this.handleChangeNumber}
        />
      </div>
    );
  }
}

child2组件中child1组件中的访问方法

1 个答案: