javascript - 如何在不向其父/子添加逻辑的情况下获取组件中子元素的 dom 节点？

Question

在下面的例子中WrapperComp需要访问 divs 的 dom 节点在第 5 行和第 8 行中，没有向 PageComp 添加逻辑或 ItemComp .我唯一可以改变的东西 PageComp是 div 标签。例如。我可以添加 ref , prop , data-attribute等给他们。

divs不必在 PageComp 中创建. WrapperComp也将被允许创建它们，但它们必须包装其每个子项(在本例中为每个 ItemComp )。

示例

class PageComp extends React.Component {
  render() {
    return (
    <WrapperComp>
      <div>
        <ItemComp/>
      </div>
      <div>
        <ItemComp/>
      </div>
    </WrapperComp>
    );
  }
}

class WrapperComp extends React.Component {
  render() {
    return (
      <div>
        <h1>A wrapper</h1>
        {this.props.children}
      </div>
    );
  }
}

class ItemComp extends React.Component {
  render() {
    return (
      <div>
        <h1>An item</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <PageComp/>,
  document.getElementById('app')
);

JSBIN

到目前为止我尝试了什么:

• 我已经试过放一个ref=在 divs 上，但是ref仅在 PageComp 中可用不在 WrapperComp .
• 我还尝试创建 divs里面WrapperComp并放一个 ref=从那里开始，但这将导致 Refs Must Have Owner Warning

现在我想知道..解决该问题的适当 react 方式是什么？

到目前为止，我想到的唯一解决方案是放置一个 data-attribute在每个 div并在 componentDidMount 之后搜索它们的 dom像那样:document.querySelectorAll('[data-xxx]') .也许我不确定这是否是您的 react 方式..

为什么要获取WrapperComp里面的节点？

我想创建一个组件来调整其子组件的尺寸。在示例中，该组件将是 WrapperComp .调整只能在 child 渲染到 dom 之后进行，例如得到clientHeight .

Answer 1

如果您不限制这需要通过应该如何获取 DOM、传递它们等方式来解决，我会摆脱这个难题并从不同的方向来解决它。

因为您没有太多控制权 <PageComp>而<WrapperComp>看起来很灵活，我稍后会通过将传递的子项转换为您需要的内容来进行包装。

class PageComp extends React.Component {
  render() {
    return (
      <WrapperComp>
        <ItemComp/>
        <ItemComp/>
      </WrapperComp>
    );
  }
}

class WrapperComp extends React.Component {
  render() {
    const wrappedChldren = React.Children.map(this.props.children, function(child) {
      return (
        <div ref={function(div) {
            this.setState{clientHeight: div.clientHeight}
        }}>
          <h1>A wrapper</h1>
          { child }
        </div>
      ); 
    });
    return <div>{ wrappedChildren }</div>;
  }
}

有了这个浓缩液就可以在<WrapperComp>上进行改造了，顾名思义，它非常直观。