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的方式存在一些问题。

我刚刚为您制作了demo个工作。请检查并评论是否可以解决您的错误。

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 组件中触发一些代码，那么我们就必须在 React 中解决此问题。方式，您需要进行升级，必须将 ChildA 中的更改通知您的上级组件，并且该更改需要转移到 ChildB >通过{strong>父组件中的props。

在父组件中具有状态也具有处理程序，该处理程序会更新父组件中的状态，并将其传递给 ChildA < / strong>有一个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> ); } }

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

3 个答案: