React: cloneElement와 함께 제공되는 필수 소품은 여전히 ​​콘솔에 경고를 표시합니다.

이해하기 쉽도록 예제를 작성했지만 기본적으로 "필수 props 누락"으로 인해 콘솔에 경고가 표시됩니다.

props는 React.cloneElement 가 있는 요소에 제공되므로 누락된 props에 대한 경고를 기대하지 않았습니다. 나는 이것이 극단적 인 경우 일 수 있다는 것을 이해합니다 ...

https://jsfiddle.net/kdsvgbzu/1/

<A name="name" value="value">
    <B></B>
</A>

class A extends React.Component {
    render() {
        return (
            <div>
                {React.Children.map(this.props.children, function(child) {
                    return React.cloneElement(child, {
                        name: this.props.name,
                        value: this.props.value
                    });
                }, this)}
            </div>
        );
    }
}

A.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

class B extends React.Component {
    render() {
        return <span>{this.props.name} : {this.props.value}</span>;
    }
}

B.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};