React 组件

封装组件
复合组件

React笔记

封装组件

<div id="example"></div>
<script type="text/babel">
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 (
	<div>
		<Name name="史迪奇的博客" />
		<Url url="https://sdq3.gitee.io" />
		<Nickname nickname="我叫史迪奇" />
	</div>
	);
}

ReactDOM.render(
	 <App />,
	document.getElementById('example')
);
</script>
</body>

正常定义组件

function MyNameIsStitch(props) {
    return <h1>我叫史迪奇</h1>;
}

ES6 class 来定义组件

class MyNameIsStitch extends React.Component {
  render() {
    return <h1>我叫史迪奇</h1>;
  }
}

用户自定义组件

<body>

<div id="example"></div>
<script type="text/babel">
function MyNameIsStitch(props) {
  {/*  name 属性通过 props.name 来获取  */}
	return <h1>我叫{props.name}!</h1>;
}

const element = <MyNameIsStitch name="史迪奇"/>;

ReactDOM.render(
	element,
	document.getElementById('example')
);
</script>

</body>

复合组件

解析: 就是可以通过创建多个组件来合成一个组件

<body>

<div id="example"></div>
<script type="text/babel">
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 (
	<div>
		<Name name="史迪奇的博客" />
		<Url url="https://sdq3.gitee.io" />
		<Nickname nickname="我叫史迪奇" />
	</div>
	);
}

ReactDOM.render(
	 <App />,
	document.getElementById('example')
);
</script>

</body>

作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-subassembly.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议