组合和继承

在React中 我们使用组合而不是继承来复用组件

组合

props.children 传递所有子组件

当我们不清楚这个组件的子组件都是什么时，我们可以直接将其传递到输出

function FancyBorder(props) {
    return(
        <div>
            //props.children 可以获取其所有的子组件数组 元素是React.element
            {props.children}
            {console.log(props.children)}
        </div>
    )
}

class PublicFancyBorder extends React.Component {

    render() {
        return(
            <FancyBorder color="blue">
                <h1 className="Dialog-title">
                    Welcome
                </h1>
                <p className="Dialog-message">
                    Thank you for visiting our spacecraft!
                </p>
            </FancyBorder>
            
        )
    }
}

export default PublicFancyBorder

JSX 标签内的任何内容都将通过 children 属性传入 FancyBorder

自定义属性传递组件

当然 我们也可以自己定义属性 将不同部分的组件传入

 function FancyBorder(props) {
    return(
        <div>
            {props.left}
            {props.right}
        </div>
    )
}

class PublicFancyBorder extends React.Component {

    render() {
        return(
            <FancyBorder left={<h1>左标题</h1>}  right={<h2>右标题</h2>}>
            </FancyBorder>
            
        )
    }
}

export default PublicFancyBorder

设置基组件 以及 实现的特殊组件

这是了通用的组件,在具体实现组件中完成其实现

function FancyBorder(props) {
    return(
        <div>
            <h1>
                {props.title}
            </h1>
        </div>
    )
}

class PublicFancyBorder extends React.Component {

    render() {
        return(
            <FancyBorder title="这是标题">
            </FancyBorder>
            
        )
    }
}

export default PublicFancyBorder