在reactjs中相对于其父级放置组件

Question

我正在尝试将子组件相对于父组件放置，但是问题在于，在第一个渲染中，它将子组件置于范围之外，直到发生setState为止。在任何setState之后，它将正常工作。 您可以帮助我正确放置它吗？ 这是我调用组件的方式：

<CardC title={"anything"} x={10} y={10} field1={"something else"} minh={130} minw={250} height={150} width={250}/>

这是子组件本身

class CardC extends Component {

constructor(props) {
    super(props);

    this.state={
        width: props.width,
        height:props.height,
        x:props.x,
        y:props.y

    }
}

render() {
    return <div className='card'>
        <div>
            <Rnd

                size={{width: this.state.width, height: this.state.height}}

                position={{x: this.state.x, y: this.state.y}}
                onDragStop={(e, d) => {
                    this.setState({x: d.x, y: d.y})
                }}
                onResize={(e, direction, ref, delta, position) => {
                    this.setState({
                        width: ref.style.width,
                        height: ref.style.height,
                        ...position,
                    });
                }}
                minWidth={this.props.minw}
                minHeight={this.props.minh}
                bounds=".content"
            >
                <Card title={this.props.title} extra={<a href="#">More</a>} style={{height: '100%'}}>

                    <p>{this.props.field1}</p>
                    <p>{this.state.height}</p>
                    <p>Card content</p> 
                </Card>
            </Rnd>

        </div>

    </div>;
}

}