当前位置: 主页 > 日志 > 个人日记 > 文章

Reack复合组件渲染

发布时间: 2021-03-07 18:29:54 作者: 王乐园 浏览次数: 198

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

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


本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: