代码片段

组件与子组件

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>
        </>
    )
}