复用组件

本课属于 Coddy React 学习旅程的“基础知识”单元。第 13 课，共 42 课。

这就是组件发挥作用的地方：一个组件可以按需重复使用任意次数。下面的每个 <Star /> 都是一个全新的副本：

function Star() {
    return <span>★</span>;
}

export default function App() {
    return (
        <div>
            <Star />
            <Star />
            <Star />
        </div>
    );
}

屏幕上有三颗星，代码中只有一个定义。只需修改一次定义，所有副本都会更新。这就是 HTML 从未拥有过的复用超能力。

挑战

简单

创建一个三星评分。

定义一个 Star 组件，使其返回 <span>★</span>。
在现有的 <div id="stars"> 内，使用该组件渲染三颗星。

亲手试试

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>