2

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

我有一个组件 A

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

还有另一个我想调用 ComponentA 方法的 Component B

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

有什么解决方法吗？

4

1 回答 1

3

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

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更改适当的状态后调用其方法。

于 2016-05-09T14:30:36.847 回答