Design composite components

Preface

Why do you ask me to blog? Because Alaska loves to write bugs!!!

Book continued above -- component part II of react foundation -- Style in React
This section continues brilliantly, Alaska continues to pretend how to write the bug gracefully!!!

1. How to design composite components?

1. The content of this section will achieve the following effect, a card.

Analysis

First, the card can be divided into three parts:
Part I content with background color
The second part is the following description
Part three the biggest box

1. Directly define the class name and style in style, and write the corresponding style name className on the component.

The first part of the code is as follows:

var Square = React.createClass({
                render: function() {
                    var squareStyle = {
                        height: 150,
                        backgroundColor: this.props.color,
                        textAlign: 'center',
                        color: 'white',
                        lineHeight:'150px'
                    };
                    return (
                        <div style={squareStyle}>
                         { this.props.content }
                        </div>
                    );
                }
            });

The code of the second part is as follows:

var Label = React.createClass({
                render: function() {
                    var labelStyle = {
                        fontFamily: "sans-serif",
                        fontWeight: "bold",
                        padding: 3,
                        margin: 0,
                        textAlign: 'center',
                    };
                    return (
                        <div style={labelStyle}>
                            <p>{ this.props.desc }</p>
                        </div>
                    );
                }
            }); 

The code of the third part is as follows:

var Card = React.createClass({
                render: function() {
                    var cardStyle = {
                        height: 200,
                        width: 150,
                        backgroundColor: "#FFF",
                        WebkitFilter: "drop-shadow(0px 0px 5px #666)",
                        filter: "drop-shadow(0px 0px 5px #666)"
                    };
                    return (
                        <div style={cardStyle}>
                            <Square color={this.props.color} content={this.props.content} />
                            <Label color={this.props.color} desc={this.props.desc}/>
                        </div>
                    );
                }
            });

Of course, the last call is as follows:

ReactDOM.render(
        <div>
            <Card color="#FFA737"  content="I am content." desc="I am describing." />
        </div>,
        destination
);

The effect is shown in the card above.
It can be seen that many values are passed from the parent component Card to the child component Label and Square through props. In this way, the child can realize many changes, and the non death can only be one content, which reflects the scalability of the component.

4. language

Although it seems very simple, it is suggested that beginners should type it by themselves, which may lead to various problems. In learning, we must not have the idea that seeing is what we get. Practice is the only criterion to test the truth.

This section is over! In the next section, "component part 3 of react foundation" will explain the design of composite components.

I have uploaded the original code to github. If you are interested in it, you can learn about it.

 Portal

Interested friends can pay attention to my public number below the two-dimensional code. (without feeding a dog food, Alaska will become useless dog, Wang Wang!)