Question

我在引导程序面板中有一个表。像这样：

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

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

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

Answer 1

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

话虽如此，人们以不同的方式使用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解决方案{{1}}（或更晚）。

在React Component

1 个答案: