在 React 中通过 ref（或 key）访问无状态组件

Question

我有一些子功能组件通过父组件内的地图进行渲染。整个应用程序呈现一个表格，相关的无状态组件呈现单个表格单元格。

我正在尝试通过像这样向它们传递一个引用来访问特定列中的所有表格单元格（以添加一个 css 类），但无状态组件中不存在引用：

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

我试图避免将其写成类组件。到目前为止，出于几个原因，我一直在使用reactDOM.findDOMNode 上的引用，并且更喜欢保持这种方式。所以我的问题是：有没有一种更有效的方法可以在不使用 refs 或 reactDOM 的情况下访问各种 DOM 节点？我一直在尝试查看是否可以使用key 属性，但在那里没有取得太大进展。

让这件事变得更棘手的是，我选择的是一列中的单元格，而不是仅仅抓取任何一行中的所有单元格。

Answer 1

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

当然，由于无状态组件只有 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} />
}