0

我正在尝试从另一个组件调用一个函数，使用老式的 react Class 样式我可以轻松地做到这一点，因为我试图挂钩我面临的所有此类问题

当我们使用参考调用 setText() 时，此代码不起作用：

export function MyComp(props, ref) {
  const [theText, setText] = useState(props.theText);

  return (
    <div>
      <h1>{theText}</h1>
      <button
        onClick={e => {
          setText("clicked with inside button");
        }}
      >
        inside button
      </button>
      <button
        onClick={e => {
          setText("not clicked");
        }}
      >
        reinit
      </button>
    </div>
  );
}

export const MyRefComp = React.forwardRef((props, ref) => (
  <MyComp ref={ref} {...props}>
    {props.children}
  </MyComp>
));

function App() {
  const compref = useRef();

  return (
    <div>
      <MyRefComp ref={compref} theText="not clicked" />
      <button
        onClick={e => {
          compref.current.setText("clicked with outside button");
        }}
      >
        outside button
      </button>
    </div>
  );
}

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

这是可编辑的代码：https ://codesandbox.io/s/reactforwardrefproblem-ublk0

感谢您的帮助

4

2 回答 2

1

这是您问题的答案，但我认为这样做不是一个好的模式。

您需要解释您要做什么，以便我们为您提供帮助。我认为上下文或 HOC 是您需要的。

工作示例。

于 2019-11-26T17:59:58.953 回答
0

谢谢@RTW，令人难以置信的是我尝试了多少组合，但我没有做到。上下文或 HOC 不适合我的情况。我还简化了它以避免中间组件，并允许使用包含 func 的对象进行多次调用。就这个 ：

const MyComp = React.forwardRef((props, ref) => {
  const [theText, setText] = useState(props.theText);
  ref.current = { setText: setText };

  return (
    <div>
      <h1>{theText}</h1>
      <button
        onClick={e => {
          setText("clicked with inside button");
        }}
      >
        inside button
      </button>
      <button
        onClick={e => {
          setText("not clicked");
        }}
      >
        reinit
      </button>
    </div>
  );
});

function App() {
  let compref = useRef();

  return (
    <div>
      <MyComp ref={compref} theText="not clicked" />
      <button
        onClick={e => {
          compref.current.setText("clicked with outside button");
        }}
      >
        outside button
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

https://codesandbox.io/s/react-example-x194f

于 2019-11-26T20:12:13.023 回答