javascript Reactjs中组件的名称是否必须与包含组件定义的文件相同？

7cwmlq89 于 2023-02-15 发布在 Java

关注(0)|答案(2)|浏览(160)

我开始学习reactjs。但是当我在youtube上看教程的时候，我经常看到当明确的组件在分离文件和导出时，人们总是用文件中定义的组件名称来命名文件名。例如：我看到定义一个组件名称Book视频总是将Book组件的文件命名为Book.js我想知道这是reactjs的官方规则还是Reactjs社区的惯例。
我可以命名文件名和文件中的组件是不同的吗？

JavaScript

来源：https://stackoverflow.com/questions/75444827/do-the-name-of-component-in-reactjs-have-to-be-the-same-with-file-containing-def

2条答案

按热度按时间

zazmityj1#

React根本不关心您的文件名（实际上，如果使用bundler，它会将源文件组合成少量脚本进行分发）您可以在每个文件中放置一个组件，或者在单个文件中放置所有组件，无论哪种方式，对React都没有影响。（使用钩子的函数组件，或者class组件的构造函数）。
下面是一个在同一个脚本标记（大致为"file"）中包含三个组件的示例：

const { useState, useEffect } = React;

const Ticker = ({start}) => {
    const [value, setValue] = useState(start);

    useEffect(() => {
        setValue(start);
    }, [start]);
    
    useEffect(() => {
        const timer = setInterval(() => {
            setValue((v) => v + 1);
        }, 1000);
        return () => {
            clearInterval(timer);
        }
    }, []);
    
    return <span className="counter">{value}</span>;
};

const Strong = ({children}) => <strong>{children}</strong>;

const Example = () => {
    return (
        <div>
            <Strong>Testing: <Ticker start={1} /></Strong>
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

赞(0）回复(0）举报 2023-02-15

ufj5ltwl2#

这些规则被开发者普遍接受，即使是eslint规则也会显示错误，但是react对其他名称也同样有效

赞(0）回复(0）举报 2023-02-15