Question

如何使用React with ES6获取对组件的引用？

我有一个组件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

有没有解决方法呢？

Answer 1

React鼓励您主要使用单向数据流构建应用程序。如果<ComponentB />是<ComponentA />的直接子项，那么您可以使用道具将数据（和函数）传递给它。

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方法。

Es6 React参考组件

1 个答案: