javascript - 如何在无状态函数中使用 ref？

Question

我是 React 新手，这是我的代码

它在控制台打印undefined，如何让它工作？

const Example = () => {
  let node;
  return (
    <div>
      <p ref={el => (node = el)}>hello world!</p>
        {console.log(node)}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

Answer 1

这是因为如果您运行以下代码，您在其中记录节点的 block 与功能 block 不同:

const Example = () => {
  let node;
  return (
    <div>
      <p
        ref={el => {
          node = el;
          console.log(node);
        }}
      >
        hello world!
      </p>
      {console.log(node)}
    </div>
  );
};

你会看到 node引用 <p>hello world!</p>在您的控制台中。如果你想使用 ref 你的方式是正确的你只需要将它设置为具有良好范围的适当变量例如使用 window.node测试链接是:https://codesandbox.io/s/kxj92vojmo .
解决您问题的最佳方法是使用状态管理器作为 MobX 在您的 View 和 View 模型之间共享引用和状态