当放置在单独的文件中时，通过 React.js 中的 ref 从父组件调用时无法访问子函数

Question

我在 react.js 中有三个组件 Parent A 和两个子组件 Child B 和 Child C。

FileA:

class Parent extends React.component {

 constructor(props) {
    super(props);
    this.childForA = React.createRef();
    this.childForB = React.createRef();
    this.CallingFunctionForA = this.CallingFunctionForA.bind(this);
    this.CallingFunctionForB = this.CallingFunctionForB.bind(this);
  }
  CallingFunctionForA = () => {
    this.childForA.current.CallFunctionInA(); // function is available
  };
  CallingFunctionForB = () => {
    console.log(this.childForB); // no functions  available through references
    this.childForB.current.CallFunctionInB(); //not accessible will give undefined
  }


      render(){
              return(
                     <div>
                     <ChildA ref={this.childForA} callFuncB={this.CallingFunctionForB.bind(this)}>
                     <ChildB ref={this.childForB} callFuncA={this.CallingFunctionForA.bind(this)}>
                     </div>
              );
      }

 }


class childA extends React.Component{

 constructor(props) {
    super(props);

 }
 ComponentDidMount = () =>{
     this.props.callFuncA();
 }
   CallFunctionInA =() =>{
    console.log("In A");
  }

}



File B:

const styles = theme => ({
root: {
  display: 'flex',
  flexWrap: 'wrap',
},
formControl: {
  margin: theme.spacing.unit*2+4,
  minWidth: 120,
},
selectEmpty: {
  marginTop: theme.spacing.unit * 2,
},
buttonSuccess: {
  backgroundColor: blue[500],
  '&:hover': {
    backgroundColor: blue[700],
  },
},
fabProgress: {
  color: blue[500],
  position: 'absolute',
  top: -6,
  left: -6,
  zIndex: 1,
},
buttonProgress: {
  color: blue[500],
  position: 'absolute',
  top: '50%',
  left: '50%',
  marginTop: -12,
  marginLeft: -12,
   },
  });

class childB extends React.Component{
    constructor(props) {
         super(props);

   }
   ComponentDidMount = () =>{
     this.props.callFuncB();
   }
    CallFunctionInB =() =>{
    console.log("In B");
  }
}
export default (withStyles(styles))  (childB);

当调用 childB 中的函数时，parentA 无法访问它，但调用 childA 中的函数时，它是可访问的。 为什么引用不能从不同文件中的子组件获得，但可以从同一文件中的子组件访问？

Answer 1

我认为您导出childB component的方式存在一些问题。

我刚刚为你做了一个工作演示。 请检查并评论它是否解决了您的错误。

Answer 2

我认为这是一个绑定问题

 class Parent extends React.component {
    const CallingFunctionForA = () => {...}
    const CallingFunctionForB = () => {...}

      render(){
              return(
                     <div>
                     <ChildA callFuncB={CallingFunctionForB}>
                     <ChildB  callFuncA={CallingFunctionForA}>
                     </div>
              );
      }

 }


class childA extends React.Component{
 ComponentDidMount = () =>{
     this.props.callFuncA();
 }
  const CallFunctionInA =() =>{
    console.log("In A");
  }

}
File B:

class childB extends React.Component{
   ComponentDidMount = () =>{
     this.props.callFuncB();
   }
   const CallFunctionInB =() =>{
    console.log("In B");
  }
}
export (childB);

Answer 3

您正在尝试实现两个组件之间的通信

为了实现这一点，我不建议像这样创建ref和交换处理程序，这里不应该使用ref 。

解决方案 ：

每当你想在ChildA组件，它变化有可能引发一些片在ChildB组件代码，然后我们在，你需要做的含量最高做出反应的方式来解决这个问题，你的父组件提供有关在ChildA且修改被告知更改需要通过Parent Component 的props前往ChildB 。

在父组件中拥有状态也有一个处理程序，它更新父组件中的状态并将其传递给ChildA有一个prop

    class Parent extends React.component {
          constructor(){
           this.state = {
              someInformation : false;
            }
          }

          updateSomeInformation = () =>{
            this.setState({someInformation : true});
          }

          render(){
                  return(
                         <div>
                         <ChildA someInformation={this.state.someInformation} 
                         updateSomeInformation={this.updateSomeInformation}/>
                         <ChildB someInformation={this.state.someInformation}  
                         updateSomeInformation={this.updateSomeInformation}>
                         </div>
                  );
          }

        }