reactjs 是否建议使用userRef从Child的组件中访问某些值？

mpgws1up 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(115)

我想创建一个 Package 器组件，并希望从孩子的组件中访问一些值。我也不想在现有的子组件代码中做任何修改，因为它直接在多个地方使用。
它是否可取，是否对最佳做法没有任何顾虑？

function ParentComponent (props) {
  const childRef = React.useRef(null);
  React.useEffect(() => {
    if (childRef.current) {
      console.log("child's reference value", childRef.current.someValue);
    }
  }, []);
  return (<ChildComponent {...props } ref = {childRef}></ChildComponent>)
}

reactjs

来源：https://stackoverflow.com/questions/76515392/is-it-advisable-to-use-userref-to-access-some-value-from-childs-component

2条答案

按热度按时间

pw9qyyiw1#

是的，你可以这样做，虽然你可能不应该。
在大多数情况下，您可能会更好地使用onChange侦听器作为组件的 prop 。下面是一个有状态子组件和一个监听该状态变化的父组件的示例。

function Component({ onChange }) {
  const [str, setStr] = useState("");
  // run the effect again when the state changes
  useEffect(() => onChange?.(str), [str]);
  return <>{str}</>;
}

function Parent() {
  // this will be called each time the `str` state is updated
  const onChange = useCallback((str) => {
    console.log("child's reference value", str);
  }, []);

  return <Component onChange={onChange} />;
}

这是你想要实现的目标的首选方法。请注意，引用对象用于存储可变值，这些值在更新时不会导致重新渲染。

赞(0）回复(0）举报 2023-06-22

lsmd5eda2#

只要子组件使用forwardRef，这样ref就可以传递给子组件，并且如果有useimperativehandle函数来公开上述值，这就可以了。
如果没有，则必须在子组件中实现forwardRef和useimperativehandle。

赞(0）回复(0）举报 2023-06-22