在React中通过引用（或键）访问无状态组件

Question

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

我试图通过将其像这样一个裁判获得特定列访问所有的表格单元格（以添加CSS类），除了在无状态的组件不存在裁判：

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

我试图避免将它写成类组件。到目前为止，我一直在使用超过reactDOM.findDOMNode的参考资料，原因有很多，并且希望保持这种状态。所以我的问题是：是否有更有效的方法获得访问各种DOM节点，而不使用refs或reactDOM？我一直在试图看看我是否可以使用key财产，但在那里并没有取得很大的进展。

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

Answer 1

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

当然，由于无状态组件只有render方法，所以如果有任何prop改变，它会再次调用你的函数。您可能需要无法控制每一个renderization做额外的逻辑：

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