React - 转发多个引用

Question

我有一个 SideNav 组件，其中包含需要滚动到相邻 html 表 (InfoTable) 中相应标题的动态创建的链接。我尝试了多种不同的方法来实现这一点，但无济于事。

export default class Parent extends Component {
  state = {
    categories: [],
  }

  scrollToHeader = (tableRefString) => {
    // Function to pass to SideNav to access refs in InfoTable
    this[tableRefString].scrollIntoView({ block: 'start' });
  }

  render() {
    return (
      <div>
        <SideNav
          categories={this.state.categories}
          scrollToHeader={this.scrollToHeader} />
        <InfoTable
          categories={this.state.categories} />
      </div>
    );
  }
}

export default class InfoTable extends Component {
  render() {
    return (
      <div>
        <table>
          <tbody>
            {this.props.categories.map(category => (
              <>
                // Forward the ref through InfoTableHeader to be set on the parent DOM node of each InfoTableHeader
                <InfoTableHeader />
                {category.inputs.map(input => <InfoTableRow />)}
              </>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

为了单击 SideNav 上的链接并滚动到 InfoTable 上的相应标题，我认为我需要根据类别数组中的名称转发在 Parent 上动态创建的引用并将这些引用设置为 DOM 节点InfoTable 中的每个标题。从那里我会将一个函数传递给 SideNav，该函数可以访问 Parent 中的 refs 以滚动到标题。

• 如何一次将多个引用转发到我的 InfoTable 组件？
• 有没有更简洁的方法来完成我想要做的事情？我研究过 React.findDOMNode() 但 refs 似乎是更好的选择。

Answer 1

我知道有一个已经被接受的答案，虽然我发现@nicholas-haley 的解决方案可以接受。 我认为更好的方法是使用内置的useImperativeHandle 钩子。

重要提示：React Hooks Api 可用于

• react@16.8.0 及更高版本
• react-native@0.59.0 及更高版本

The React hooks API Docs 状态：

useImperativeHandle 自定义使用 ref 时暴露给父组件的实例值。与往常一样，在大多数情况下应避免使用 refs 的命令式代码。 useImperativeHandle 应该与 `forwardRef

一起使用

此注释后跟以下示例：

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

因此，在我看来，更简洁的解决方案是通过 useImperativeHandle 挂钩委派所需的 refs。

这种方式不需要特殊的 ref 语法，组件可以简单地返回一个特定类型的 FatherRef；示例：

// LabelInput.js
function LabelInput(props, ref) {
    const labelRef = useRef();
    const inputRef = useRef();

    useImperativeHandle(ref, () => ({
      focus: () => {
       inputRef.current.focus();
      },
      get input() {
          return inputRef.current;
      },
      get label() {
          return labelRef.current;
      },
      // ... whatever else one may need
    }));
    return (
      <div>
        <label ref={labelRef} ... />
        <input ref={inputRef} ... />;
      </div>
    )
}
LabelInput = forwardRef(LabelInput);

function MyScreen() {
   const labelInputRef = useRef();

   const onClick = useCallback(
    () => {
//       labelInputRef.current.focus(); // works
//       labelInputRef.current.input.focus(); // works
// ... etc
    },
    []
   );

   return (
     ...
      <LabelInput ref={labelInputRef} ... />
     ....
   )
}

Answer 2

我遇到过类似的情况，我需要将多个 ref 转发给我的 Parent 组件的子组件。

我仍然没有找到一个优雅的解决方案，但是您可以尝试将您的 refs 作为对象传递，并在 forwardRef 回调中解构：

// Parent
ref={{
    ref1: this.ref1,
    ref2: this.ref2
}}

---

// Child
export default React.forwardRef((props, ref) => {
  const { ref1, ref2 } = ref;

  return (
    <Child1
      {...props}
      ref={ref1}
    />
    <Child2
      {...props}
      ref={ref2}
    />
  );
});

我不太喜欢这里的命名（我更喜欢 ref 被称为 refs），但如果你遇到困难，这很有效。

编辑：

2020 年我相信@samer-murad 的回答是解决这个问题的最佳方案。

Answer 3

我实际上是从 react-hook-form 中挑选出来的，但他们提供了一种共享 ref 并一次分配多个 ref 的好方法：

<input name="firstName" ref={(e) => {
  register(e) // use ref for register function
  firstNameRef.current = e // and you can still assign to ref
}} />

Answer 4

我仍然不明白ref 属性中发生了什么，但以下React 源代码typeof type.render === 'function' + 其他答案使我尝试从@987654326 传递hoisted refs 的function @，它的工作原理！

class Child extends React.Component {
  render() {
    return (
      <div>
        <div
          ref={this.props.pa}
          style={this.props.style}
          onClick={async () => {
            this.storeAuth(...this.props.storableAuth);
            this.props.clearStore();
          }}
        />
        <div
          ref={this.props.fwd}
          style={this.props.style}
          onClick={async () => {
            this.props.onStart();
            const res = await this.getUserInfo(verbose, auth, storedAuth);
            if (res === "login?") this.props.onPromptToLogin();
            if (res) this.props.onFinish(); //res.isAnonymous
          }}
        />
      </div>
    );
  }
}

export default React.forwardRef((props, getRefs) => {
  const { pa, fwd } = props.getRefs();
  return <Child fwd={fwd} pa={pa} {...props} />;
});


class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.pa = React.createRef();
    this.fwd = React.createRef();
  }
  render() {
    return (
      <Child
        getRefs={() => {
          return {
            pa: this.pa,
            fwd: this.fwd
          };
        }}
        storableAuth={this.state.storableAuth}//[]
        clearAuth={() => this.setState({ storableAuth: null })}
      />
    );
  }
}