REACT (tres) - Los niños reaccionan montaje de

directorio

1.Children

componentes 1.1dialog

1.1.1CSS

1.1.2 dialog.js

---

1.Children

Un componente por apoyos además para dar el valor de la propiedad adquirida por su cuenta, también puede incluirse de obtener los contenidos de los componentes, subconjuntos es exterior, en frente de nosotros escribir más componentes como un solo componentes de la etiqueta, las aplicaciones prácticas son muchos componentes doble etiqueta puede contener contenido que también se puede llamar: contenedor de montaje , entonces el componente de contenido contiene, podemos props.children para obtener

componentes 1.1dialog

1.1.1CSS

.dialog {
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translateX(-50%) translateY(-50%) ;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-sizing: border-box;
    background: #fff;
    width: 30%;
}
.dialog_header {
    padding: 20px 20px 0;
    text-align: left;
}
.dialog_title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
}
.dialog_content {
    padding: 30px 20px;
    color: #48576a;
    font-size: 14px;
    text-align: left;
}
.dialog_close_btn {
    position: absolute;
    right: 10px;
    top: 5px;
}
.dialog_close_btn:before {
    content: 'x';
    color: #999;
    font-size: 20px;
    cursor: pointer;
}

1.1.2 dialog.js

import React from 'react';
import './dialog.css';

export default class Dialog extends React.Component {

    static defaultProps = {
        title: '这是默认标题'
    }

    render() {
        return(
            <div className="dialog">
                <i className="dialog_close_btn"></i>
                <div className="dialog_header">
                    <span className="dialog_title">{this.props.title}</span>
                </div>
                <div className="dialog_content">
                    {this.props.children}
                </div>
            </div>
        );
    }

}