在React Component中获取父div

Question

我在bootstrap面板中有一个表。像这样的东西：

  <Panel className='userPanel'>
     <Table/>
  </Panel>

现在我需要在表格中引用Panel。一个站点上可以同时有很多表/面板，所以我不想使用ID与ReactDom.findDOMNode一起使用....对此最好的解决方案是什么？

编辑：我需要表中的引用，因为我使用Facebooks数据表。这些表确实有一个静态的宽度/高度，所以为了使它们流畅，我需要添加一个resize处理程序来检查要调整的父级的宽度和高度。

Answer 1

你的建议打破了React鼓励你工作的方式。组件应该被封装，他们需要的所有数据都应该作为道具传递给它们。每次从组件中调用时，都会使其参照透明度无效，即组件的输出（通常是渲染的内容）应该是传递给它的props的结果。

话虽如此，人们以不同的方式使用React（它甚至会让你使用setState来破坏纯度）但是，将实际的DOM节点传递给子节点是很困难的，因为当它们被实例化时，它们的父节点的DOM节点不存在。

我不知道Facebook DataTable API所以我不能真正建议一种更好的方法来重构你的应用程序，但听起来你只需要一个动态的宽度/高度来调整表的大小，所以传递一个函数来获得它。

class Parent extends React.Component {
  constructor( props ) {
    super( props )
  }

  getDimensions() {
    // Do some stuff here to return dimensions
    return {
      width: XXX,
      height: XXX
    }
  }

  render() {
    <Parent ref="el">
      <Table getDimension={ this.getDimensions } />
    </Parent>
  }
}

你仍然不能从this.props.setDimensions内部调用Table:render，但你无论如何都不能使用.parentNode解决方案所以我猜你已经在componentDidMount（或更晚）中渲染了这个表。