Javascript Es6对组件进行反应参考

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

我有一个组件a

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

如何获取对ComponentA的引用？ 我试过使用

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

---

有什么解决方法吗？

React鼓励您主要使用单向数据流构建应用程序。如果

是

的直接子级，则可以使用道具将数据（和函数）传递给它

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

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

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

函数组件a（）{
const doSomething=（）=>console.log（'I doSomething'）；
返回(
);
}
功能组件B（道具）{
返回(
例子
);
}

但是，如果

是

的父级，或者与之没有直接连接，则需要引入事件/状态管理系统以允许组件通信

解决这个问题最流行的模式是调用，最流行的流量实现是

对于像Redux这样的库，您的组件会分派修改中央存储状态的操作。应用程序中的其他组件可以侦听存储中的更改并做出相应的响应

---

在您的情况下，您需要使用

doSomethingComponentB

方法来分派一个将更改存储的操作<代码>需要订阅更改，并在相应状态更改后调用其

doSomethingComponentA

方法。

A和B是如何连接的？它们没有任何直接连接。。我只是想知道如何从其他组件调用方法。如果您想避免通量，请看一下：

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

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

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

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