Question

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

我试图通过传递一个像这样的ref来获取特定列中的所有表格单元格（添加一个css类），除了在无状态组件中不存在refs：

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

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

使这更棘手的是我在列中选择单元格，而不是只抓取任何一行中的所有单元格。

Answer 1

你可以通过一个道具来通知你自己你的元素已被渲染，因此，已经挂载（尚未真正装载到第一次渲染，但很快就会挂载，希望它足够）。 / p>

当然，由于无状态组件只有渲染方法，如果任何支柱改变，它将再次调用你的函数。您可能需要控制不为每次渲染执行额外的逻辑：

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

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

1 个答案: