在呈现|之前从virtualDOM访问父节点ReactJS

我需要根据父元素设置组件尺寸。是否可以通过virtualDOM中的ref来获取父级的宽度和高度？在呈现|之前从virtualDOM访问父节点ReactJS

家长

export default class App extends React.Component { 
 
    render() { 
 

 
    return (
 
     <div> 
 
     <div className={'avocado-container'} ref={(container) => { this.container = container; }}> 
 
      <Resizer parent={this} scrollAxis={'y'}> 
 
      </Resizer> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}

我需要的尺寸在孩子的构造。

可能有类似this.refs.container.offsetWidth的东西吗？

来源

2017-02-12 Honza Václavík

为什么不把它们作为道具从父母组件中传递？ – havenchyk

编号布局尺寸由浏览器计算，而不是虚拟DOM。可以手动设置尺寸，或者使用CSS来制作您的子组件填充宽度和高度。您也可以从componentDidMount中的渲染组件中读取宽度和高度，并在那里调用setState，这不是理想的，会导致第二次渲染，但有时需要完成。

来源

2017-02-12 17:03:40

这样的组件是可测试的吗？ – havenchyk

如果您需要测试didMount中元素维度流的读数，则可以使用像jsdom这样的工具来提供必要的环境。如果你不想测试它，你可以在didMount中做一个if语句来检查某些对象的存在，比如'global.window' –

不要误解我的意思，但jsdom不支持获得html元素的真实宽度和高度，因此如果没有真正的浏览器环境asaik，将很难测试 – havenchyk

在呈现|之前从virtualDOM访问父节点ReactJS

回答

相关问题