访问子组件的样式属性

Question

如何访问组件子项的样式属性？

我正在创建一个框架组件，必须知道其中一个孩子的width才能设置它自己的width值。

我怎样才能实现这一目标？

class Frame extends Component {
    state = {}
    componentDidMount() {
        // how can I access the style properties  of
        // a child element ?
        // I would like to know the width
        // of the first child to make Frame
        // render in a specific way
    }

    render() {
        const {children} = this.props;

        return (
                <div style={{width: value}}> // value calculated against the width
                                            // of children[0]
                    {children}
                </div>
        );
    }
}

Answer 1

DOM由组件树组成。元素可以具有子元素：在元素的open标记和close标记之间。这两个标签中的那些项目是该元素的子项。因此，你必须使用＆＃39; props.children＆＃39;而不是那些只是孩子的＃39;此上下文中的props将引用此子项所属的父元素。