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

2019年7月28日 180次阅读

在以下示例中,WrapperComp需要访问第5行和第8行中div的dom节点,而无需向PageComp或ItemComp添加逻辑.我在PageComp中唯一能改变的是div标签.例如.我可以为它们添加ref,prop,data-attribute等.

不必在PageComp内创建div. 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

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

>我已经尝试在div上放置一个ref =,但是ref只能在PageComp中而不能在WrapperComp中使用.
>我也尝试在WrapperComp中创建div并从那里放置一个ref =但是这会产生一个Refs Must Have Owner Warning

现在我想知道..解决这个问题的反应是什么？

到目前为止,我想到的唯一解决方案是在每个div上放置一个数据属性,并在componentDidMount之后搜索dom：document.querySelectorAll(‘[data-xxx]’).也许我不确定你是否就这样做了反应..

为什么我想在WrapperComp中获取节点？

我想创建一个调整其子项维度的组件.在该示例中,组件将是WrapperComp.这些调整只能在儿童渲染到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>中进行转换,这正如其名称所暗示的那样非常直观.

点赞