React - 发送 ref 作为道具不起作用

Posted 2023-02-22

【中文标题】React - 发送 ref 作为道具不起作用

【英文标题】：React - sending down ref as a prop not working

【发布时间】：2019-11-18 16:38:27

【问题描述】：

我在我的项目中使用react-mui 库，我想在其中实现一个MenuList 组件，该组件位于MenuList 组合here 下。在我的应用程序中，虽然我将ref 作为prop 发送到child component，但我有一个menu。您可以查看代码框示例here。 当我从这样的父组件以props 发送ref 和setRef 方法时：

state = 
    open: false,
    ref: React.createRef()
  ;

  setRef = element => 
    this.setState( ref: element );
  ;

  handleToggle = () => 
    this.setState(state => ( open: !state.open ));
  ;

  handleClose = () => 
    this.setState( open: false );
  ;

  render() 
    return (
      <MenuListComposition
        setRef=this.setRef
        handleToggle=this.handleToggle
        handleClose=this.handleClose
        open=this.state.open
        ref=this.state.ref
      />
    );
  

到具有菜单按钮的子组件：

    <MenuButton
      className=classes.button
      handleToggle=handleToggle
      setRef=setRef
      open=open
      ref=ref
   />

然后有一个菜单列表的 Popper 组件在错误的位置打开，如果你点击 TOGGLE MENU GROW button，你可以在 codesanbox 示例中看到。

      <Popper open=open anchorEl=ref transition disablePortal>
          ( TransitionProps, placement ) => (
            <Grow
              ...TransitionProps
              id="menu-list-grow"
              style=
                transformOrigin:
                  placement === "bottom" ? "center top" : "center bottom"
              
            >
              <Paper>
                <ClickAwayListener onClickAway=handleClose>
                  <MenuList>
                    <MenuItem onClick=handleClose>Profile</MenuItem>
                    <MenuItem onClick=handleClose>My account</MenuItem>
                    <MenuItem onClick=handleClose>Logout</MenuItem>
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )
        </Popper>

我做错了什么以及如何解决这个问题，或者我如何在stateless 组件中使用ref 以避免将ref 作为prop 发送？

【参考方案1】：

ref 是 reactjs 中的关键字。当您使用 ref 作为道具时，它将组件链接到 ref 对象。在FancyButton 组件和MenuListComposition 组件上将其重命名为您喜欢的任何名称。

来自react documentation.

React 支持一个可以附加到任何组件的特殊属性。

Working example 在两个组件中都将 ref 重命名为 parentRef。

编辑：

正如 Vaibhav Shukla 所指出的，您可以在 FancyButton 和 MenuListComposition 上使用 React.forwardRef，这可能是正确的做法。

Working example

【讨论】：

您的示例显示了与我的相同的错误。菜单列表在第一个按钮下方打开，而不是最后一个按钮。

再试一次，也许我做了一些干扰你的测试。

谢谢，伙计。我浪费了 2 个多小时试图弄清楚这一点。

【参考方案2】：

Ref 不能像 React 中的 prop 一样传递。 Refs 通常在构建组件时分配给实例属性，以便可以在整个组件中引用它们。此外，当将 ref 传递给 render 中的元素时，可以在 ref 的当前属性处访问对节点的引用。

React 提供方法 React.forwardRef 来传递组件层次结构中的 refs。对于应用程序中的大多数组件，这通常不是必需的。但是，它对某些类型的组件很有用，尤其是在可重用的组件库中。 Read about forwardRef

    const ButtonWrapper = React.forwardRef((props, ref) => (
      <button ref=ref>
        props.children
      </button>
    ));

    // You can now get a ref directly to the DOM button:
    const ref = React.createRef();
    <ButtonWrapper ref=ref>Click me!</ButtonWrapper>;

【讨论】：

它可以工作，但令人讨厌的是在开发中创建控制台日志警告Warning: [object Object]: 'ref' is not a prop.，这会污染测试控制台