# 列表渲染
使用 map 将集群生成一个 JSX 节点：
1
2
3
4
5const List = function () {
const arr = [1, 2, 3, 4, 5];
const ele = arr.map((data) => <li>{data}</li>);
return <ul>{ele}</ul>;
};
# 条件渲染
在组件内通过条件语句控制返回的内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20// 条件显示组件示例
const IfComponents = function () {
const [isShow, setIsShow] = useState(false);
let content = <h1>内容</h1>;
// 使用条件来设置 content 的内容
if (isShow == false) {
content = <></>;
}
const changeShowOrHide = () => {
setIsShow(!isShow);
};
return (
<>
<button onClick={changeShowOrHide}>{isShow ? "隐藏" : "显示"}</button>
{content}
</>
);
};
在上面所示的示例中，在组件中定义了一个控制内容显示的状态 isShow ，并通过按钮改变内容的显示 / 隐藏，按钮本身的文字同时随着三元操作进行改变。
# 将事件处理作为 props 传递，让子组件可以调用父组件的事件处理程序
下面的代码中，父组件可以将事件通过 props 传给子组件，子组件可以通过这一点直接调用父组件的事件处理函数，这使得代码具有了极大的灵活性。而在 Vue 中，这一操作的通过 emit 实现，增加了额外的负担。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// 事件作为props传递
const Father = function(){
const onClick = ()=>{
alert("父组件事件的处理函数！")
}
return <>
<Children onClick={onClick}/>
</>
}
const Children = function({onClick}){
return (
<>
<button onClick={onClick}>我是子组件的按钮</button>
</>
)
}
