javascript - Es6 React引用组件

如何使用带有ES6的React获得对组件的引用？

我有一个组件A

class ComponentA extends React.Component {
    doSomethingInComponentA() {
       //do Something here..
    }
}
render(<ComponentA />, document.getElementById('container'));

还有另一个组件B，我想在其中调用ComponentA的方法

class ComponentB extends React.Component {
    doSomethingInComponentB() {
        ComponentAInstance.doSomethingInComponentA()
    }
}

如何获得对ComponentA的引用？
我尝试使用

var ComponentAInstance = render (<ComponentA />,
document.getElementById('container'))
export default ComponentAInstance;

但是由于我使用的是Webpack，而ComponentA.jsx是我的切入点，所以我得到了错误

Module not found: Error: a dependency to an entry point is not allowed

有什么解决方法吗？

最佳答案

React鼓励您以一种主要的数据流方式构建应用程序。如果<ComponentB />是<ComponentA />的直接子代，则可以使用prop将数据（和函数）传递给它。

function ComponentA() {
  const doSomething = () => console.log('I did something');

  return (
    <ComponentB onClick={doSomething} />
  );
}

function ComponentB(props) {
  return (
    <button onClick={props.onClick}>Example<button>
  );
}

但是，如果<ComponentB />是<ComponentA />的父级或与其没有直接连接，则需要引入事件/状态管理系统以允许组件进行通信。

解决此问题的最流行的模式称为Flux，最流行的Flux实现是Redux。

使用Redux之类的库，您的组件将分派一些操作，这些操作将修改中央存储的状态。应用程序中的其他组件可以侦听存储中的更改并做出相应的响应。

在您的情况下，您需要doSomethingInComponentB方法来调度将更改商店的操作。 <ComponentA />将需要订阅更改，并在更改了适当的状态后调用其doSomethingInComponentA方法。