Reack复合组件渲染

  作者:冷影再见   标签:[ React ]  点击:[ 230 ]
简介: 我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。以下实例我们实现了输出网站名字和网址的组件:
<div id="example"></div>
<script type="text/babel">
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')
);
</script>
  1. 输出内容  :

网站名称:冷色链

网站地址:https://www.kongjz.com

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