javascript - 在 React 中通过 ref (或 key)访问无状态组件

Question

我有一些子功能组件通过父组件内的 map 进行渲染。整个应用程序呈现一个表格，其中有问题的无状态组件呈现各个表格单元格。

我试图通过像这样传递引用来访问特定列中的所有表格单元格(以添加 css 类)，但无状态组件中不存在引用:

const Cell = (props) => {
  return (
    <td className="cell" key={props.column}>
      ...
    </td>
  );
};

我试图避免将其编写为类组件。到目前为止，由于一些原因，我一直在使用 refs 而不是 reactDOM.findDOMNode ，并且更愿意保持这种方式。所以我的问题是:是否有一种更有效的方法可以在不使用 refs 或 reactDOM 的情况下访问各种 DOM 节点？我一直在尝试查看是否可以使用 key 属性，但尚未取得太大进展。

让这个问题变得更棘手的是，我选择了一列中的单元格，而不是仅仅抓取任意一行中的所有单元格。

Answer 1

您可以传递一个 Prop 来通知自己您的元素已渲染，因此已安装(第一次渲染时尚未真正安装，但很快就会安装，希望它足够了)。

当然，由于无状态组件只有 render 方法，如果任何 prop 发生变化，它会再次调用你的函数。您可能需要控制不要为每个渲染执行额外的逻辑:

const Cell = (props) => {
  if (typeof props.onRender === 'function') {
    props.onRender(this);
  }
  return (
    <td className="cell" key={props.column}>
      ...
    </td>
  );
};

以及父组件:

constructor(props) {
  super(props);
  ...
  this.onRender = this.onRender.bind(this);
}

onRender(instance) {
  if (this.child !== undefined) {
    this.child = instance;
  }
}

render() {
  return <Cell {...desiredProps...} onRender={this.onRender} />
}