drop-shadow

<div id="container"></div>

<script>
    var destination = document.querySelector("#container");
    var Square = React.createClass({
        render:function(){
            var squareStyle = {            //CSS样式
                height: 150,
                backgroundColor: this.props.color
            };
            return (
                <div style={squareStyle}>
                </div>
            );
        }
    });
    var Card = React.createClass({            //父控件
        render:function(){
            var cardStyle = {
                height: 200,
                width: 150
            };
            return (
                <div style={cardStyle}>
                    <Square color={this.props.color/>      //调用组件并传递属性
                </div>
                );
        }
    };
    ReactDOM.render(
        <div>
            <Card color="#FF6663"/>        //渲染
        </div>,
        destination
        );
</script>

嵌套组件传值

将属性依次向子控件传递