React尝试在功能组件中调用子(useRef)函数

时间:2019-10-11 06:48:22

标签: reactjs react-functional-component

我有一个子组件正在生成并显示一个随机数。
我想从父母那里控制它。
但参考电流为空。

如何在功能组件中从父级调用子级功能
https://codesandbox.io/s/busy-joliot-85yom

function App() {
  const child = useRef();
  const generate = () => child.current.generate();

  return (
    <div className="App">
    <br />
      <Child ref={child}></Child><br />
      <button onClick={generate}>regenerate from parent (Not working)</button>
    </div>
  );
}

function Child(props){
  const [number, setNumber] = useState(0);
  const generate = () => setNumber(Math.round(Math.random() * 10));
  return <div>{number} <br /> <button onClick={generate}>regenerate from child</button></div>;
}

谢谢

1 个答案:

答案 0 :(得分:0)

您不能在功能组件中使用ref属性,但是您可以自己处理任何ref对象,只是不要将其称为“ ref”,react不喜欢它。 检查我的example