3

我在我的项目中使用了一个react-mui库，我想在其中实现一个组件，可以在此处MenuList的 MenuList 组合下找到。在我的应用程序中，虽然我将一个as发送到我有一个. 您可以在此处查看代码框示例。当我从这样的父组件发送一个和一个方法时：refpropchild componentmenurefsetRefprops

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.

      <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>

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

4

2 回答 2

5

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

来自反应文档。

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

在两个组件中将 ref 重命名为 parentRef 的工作示例。

编辑：

正如 Vaibhav Shukla 指出的那样，您可以同时使用React.forwardRef这两种方法FancyButton，MenuListComposition这可能是正确的方法。

工作示例

于 2019-07-09T07:33:03.910 回答
4

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

React 提供了React.forwardRef方法来传递组件层次结构中的 refs。对于应用程序中的大多数组件，这通常不是必需的。但是，它对某些类型的组件很有用，尤其是在可重用的组件库中。阅读关于 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>;
于 2019-07-09T07:46:35.893 回答