代码片段
组件与子组件
import React from "react";
function Article({title, content, active}) {
return (
<>
<div>
<h2>{title}</h2>
<p>{content}</p>
<p>{active? '显示中': '已隐藏'}</p>
</div>
</>
)
}
export default function App()
{
return (
<>
<Article
title='这是标题信息1'
content='这是标题信息1'
active
/>
<Article
title='这是标题信息2'
content='这是标题信息2'
/>
</>
)
}
子组件中嵌套子组件(使用展开运算符)
import React from "react";
function Detail({content, active}) {
return (
<>
<p>{content}</p>
<p>{active? '显示': '隐藏'}</p>
</>
)
}
function Article({title, detailData}) {
return (
<>
<h2>{title}</h2>
<Detail
{...detailData}
/>
</>
)
}
export default function App() {
const articleData = {
title: '标题1',
detailData: {
content: '内容1',
active: true
}
}
return (
<>
<Article
{...articleData}
/>
</>
)
}
利用JSX语法实现插槽的功能(插槽处关键字必须使用children)
import React from "react";
function List({children}) {
return (
<ul>
{children}
</ul>
)
}
export default function App () {
return (
<>
<List>
<li>内容1</li>
<li>内容1</li>
<li>内容1</li>
</List>
<List>
<li>内容2</li>
<li>内容2</li>
<li>内容2</li>
</List>
</>
)
}
进阶JSX插槽功能
import React from "react";
function List({ children, title, footer = <p>无底部内容</p> }) {
return (
<>
<h2>{title}</h2>
<ul>
{children}
</ul>
{footer}
</>
)
}
export default function App() {
return (
<>
<List
title='标题1'
footer={<p>标题1的底部内容</p>}
>
<li>内容1</li>
<li>内容1</li>
<li>内容1</li>
</List>
<List
title='标题2'
>
<li>内容2</li>
<li>内容2</li>
<li>内容2</li>
</List>
<List
title='标题3'
footer={<p>标题3的底部内容</p>}
>
<li>内容3</li>
<li>内容3</li>
<li>内容3</li>
</List>
</>
)
}