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

在以下示例中，WrapperComp需要访问第5行和第8行中divs的dom节点，而无需在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

现在我想知道..什么是应对该问题的合适方法？

直到现在，我想到的唯一解决方案是在每个data-attribute上放一个div，然后在componentDidMount之后搜索dom，像这样:document.querySelectorAll('[data-xxx]')。也许我不确定这是否是您的反应方式。

为什么要在WrapperComp中获取节点？

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

最佳答案

如果您不限制需要通过如何获取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>中进行转换，顾名思义，这是非常直观的。