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

我在react.js中有三个组件父组件A和两个子组件子组件B和子组件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);

FileA:
类父类扩展了React.component{
建造师（道具）{
超级（道具）；
this.childForA=React.createRef（）；
this.childForB=React.createRef（）；
this.CallingFunctionForA=this.CallingFunctionForA.bind（this）；
this.CallingFunctionForB=this.CallingFunctionForB.bind（this）；
}
调用函数fora=（）=>{
this.childForA.current.CallFunctionInA（）；//函数可用
};
调用函数forb=（）=>{
console.log（this.childForB）；//没有通过引用可用的函数
this.childForB.current.CallFunctionInB（）；//不可访问将给出未定义的
}
render（）{
返回(
);
}
}
类childA扩展了React.Component{
建造师（道具）{
超级（道具）；
}
ComponentDidMount=（）=>{
this.props.callFuncA（）；
}
CallFunctionInA=（）=>{
控制台。登录（“A”）；
}
}
文件B：
常量样式=主题=>({
根目录：{
显示：“flex”，
flexWrap:“wrap”，
},
表单控制：{
边距：主题。间距。单位*2+4，
最小宽度：120，
},
选择空：{
marginTop:theme.space.unit*2，
},
按钮成功：{
背景颜色：蓝色[500]，
“&：悬停”：{
背景颜色：蓝色[700]，
},
},
进展：{
颜色：蓝色[500]，
位置：'绝对'，
前-6名，
左：-6，
zIndex:1，
},
按钮前进：{
颜色：蓝色[500]，
位置：'绝对'，
前50%，
左：50%，
玛金托普：-12，
边缘左：-12，
},
});
类childB扩展了React.Component{
建造师（道具）{
超级（道具）；
}
ComponentDidMount=（）=>{
this.props.callFuncB（）；
}
CallFunctionInB=（）=>{
控制台。登录（“B”）；
}
}
导出默认值（带样式（样式））（childB）；

---

调用childB中的函数时，从父级A无法访问该函数，但调用childA中的函数时，该函数是可访问的。为什么不同文件中的子组件不能提供引用，而可以从同一文件中的子组件访问引用？

我认为这是一个绑定问题

 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);

类父级扩展React.component{
const CallingFunctionForA=（）=>{…}
const CallingFunctionForB=（）=>{…}
render（）{
返回(
);
}
}
类childA扩展了React.Component{
ComponentDidMount=（）=>{
this.props.callFuncA（）；
}
常量CallFunctionInA=（）=>{
控制台。登录（“A”）；
}
}
文件B：
类childB扩展了React.Component{
ComponentDidMount=（）=>{
this.props.callFuncB（）；
}
常量CallFunctionInB=（）=>{
控制台。登录（“B”）；
}
}
出口（儿童b）；

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

为了实现这一点，我不建议创建

ref

并像这样交换处理程序，这里不应该使用

ref

解决方案：

每当您想要更改ChildA组件时，必须触发ChildB组件中的某段代码，然后我们必须以反应的方式解决此问题，您需要执行升级，必须将ChildA中的更改告知您的父组件，并且该更改需要通过

props

从父组件传递到ChildB

在父组件中具有状态还具有一个处理程序，该处理程序更新父组件中的状态，并将其传递给ChildA具有

属性

    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>
                  );
          }

        }

类父级扩展React.component{
构造函数（）{
此.state={
一些信息：虚假；
}
}
updateSMEInformation=（）=>{
this.setState（{someInformation:true}）；
}
render（）{
返回(
);
}
}

我认为您导出

childB组件的方式存在一些问题

我刚为你做了一份工作。请检查并评论它是否解决了您的错误。
为什么要将ChildA和父组件保留在同一个文件中@PraveenRaoChavan.G我不想保留，但如果我不将它们保留在同一个文件中，我无法通过引用从父组件访问子函数查看您的代码我认为您希望从childB调用childA函数，从childA调用childB函数，对吗？这就是为什么要在parent中创建ref并交换处理程序，对吗？没错，childA中的某些更新会触发childB中的另一个函数，反之亦然。如果在parentb中导入了childB，但是这个方法不起作用，我应该在哪里用props初始化childB中的state组件，如果绑定是在构造函数中完成的，则props中的后续更改不会反映在childB组件的局部状态变量中。状态将驻留在父组件中，ChildA和ChildB将更新父组件，以便在发生更改时通知另一个子组件。我的导出方式与您在演示中的导出方式完全相同，不同之处在于我正在导出一些格式样式，如此处的材质ui演示所示。（）简单问一个问题，为什么我像导出样式一样导出，引用没有被传递，但是如果导出是与函数声明一起内联完成的，那么引用就被传递了。我不认为这也有什么不对
withStyles（）
返回一个。好极了。正确的？您需要传递
innerRef