访问子组件的样式属性

Question

How can I access the style properties of the children of a component ?

I am creating a frame component that has to know the width of one of it's children in order to set it's own width value.

How can I achieve that ?

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

The DOM is made up of a component tree. An element can have a child: between the open tag and the close tag of an element. Those items within these two tags are the children of that element. Thus, you must use 'props.children' rather that just 'children'. The props in this context will be referring to the parent element which this child belongs to.