我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。以下实例我们实现了输出网站名字和网址的组件：

Reack复合组件渲染

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。以下实例我们实现了输出网站名字和网址的组件：

<div id="example"></div>

let fsa = {
color:'red'
}
function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <p style={fsa}>
        <Name name="冷色链" />
        <Url url="https://www.kongjz.com" />
        <Nickname nickname="小冷" />
    </p>
    );
}
ReactDOM.render(
     <App />,
    document.getElementById('example')
);

注意: 输出时必须有一个标签把所有的标签包含起来, 如上述代码 p 标签

输出内容 :

网站名称：冷色链 网站地址：

https://www.kongjz.com