Вызов функции из другого подключенного компонента с помощью ref/forwardRef

Question

Я пытаюсь вызвать функцию из другого компонента, со старым стилем реакции класса, я смог сделать это легко, так как я пытаюсь подключить все, с чем сталкиваюсь с такой проблемой

Этот код не работает, когда мы вызываем 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

Спасибо за помощь

Answer 1

Вот ответ на ваш вопрос, но я не думаю, что это хороший шаблон.

Вам нужно объяснить, что вы пытаетесь сделать, чтобы мы могли вам помочь. Я предполагаю, что контекст или HOC - это то, что вам нужно.

Рабочий пример.

Answer 2

Спасибо @RTW! Невероятно, сколько комбинаций я пробовал, но мне не удалось это сделать. Контекст или HOC не подходят в моем случае. Я также упростил его, чтобы избежать промежуточного компонента и разрешить несколько вызовов с объектом, который содержит функцию. вот:

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