React技巧之导入组件
<p>正文从这开始~</p><h2 id="总览">总览</h2>
<p>在React中，从其他文件中导入组件：</p>
<ol>
<li>从<code>A</code>文件中导出组件。比如说，<code>export function Button() {}</code> 。</li>
<li>在<code>B</code>文件中导入组件。比如说，<code>import {Button} from './another-file'</code> 。</li>
<li>在<code>B</code>文件中使用导入的组件。</li>
</ol>
<h2 id="命名导入导出">命名导入导出</h2>
<p>下面的例子是从一个名为<code>another-file.js</code>的文件中导入组件。</p>
<pre><code class="language-jsx">// 👇️ named export
export function BigButton() {
return (
<button
style={{padding: '2rem 1rem'}}
onClick={() => console.log('big button')}
>
Big button
</button>
);
}
// 👇️ named export
export const SmallButton = () => {
return (
<button onClick={() => console.log('small button')}>Small button</button>
);
};
</code></pre>
<p>下面是我们如何从一个名为<code>App.js</code>文件中导入组件。</p>
<pre><code class="language-jsx">// 👇️ named import
import {BigButton, SmallButton} from './another-file';
export default function App() {
return (
<div>
<BigButton />
<hr />
<SmallButton />
</div>
);
}
</code></pre>
<p>如有必要，请确保当前路径指向<code>another-file.js</code>模块。上面的例子假设<code>another-file.js</code>和<code>App.js</code>位于相同的目录下。</p>
<p>举例来说，如果<code>another-file.js</code>位于上层目录，你必须这样导入：<code>import {BigButton} from '../another-file'</code> 。</p>
<blockquote>
<p>在导入组件时，我们使用大括号包裹组件名称。这被称为命名导入。</p>
</blockquote>
<p><code>import/export</code>语法被称为JavaScript模块。为了能够从不同的文件中导入一个组件，必须使用命名的或默认的导出方式将其导出。上述例子使用了命名导出和导入。</p>
<p>命名和默认导入导出的主要不同之处在于，在每个文件中，你可以有多个命名导出，但只能有一个默认导出。</p>
<h2 id="默认导入导出">默认导入导出</h2>
<p>让我们看一个例子，看看我们如何导入一个使用默认导出的组件。</p>
<pre><code class="language-jsx">// 👇️ default export
export default function BigButton() {
return (
<button
style={{padding: '2rem 1rem'}}
onClick={() => console.log('big button')}
>
Big button
</button>
);
}
</code></pre>
<p>很重要：如果你导出一个变量（或者箭头函数）作为默认导出，你必须先声明再导出。你不能在同一行内声明变量同时默认导出变量。</p>
<pre><code class="language-jsx">const BigButton = () =>{
return (
<button
style={{padding: '2rem 1rem'}}
onClick={() => console.log('big button')}
>
Big button
</button>
);
}
// 👇️ default export
export default BigButton;
</code></pre>
<p>下面是如何使用默认导入来导入组件。</p>
<pre><code class="language-jsx">// 👇️ default import
import BigButton from './another-file';
export default function App() {
return (
<div>
<BigButton />
</div>
);
}
</code></pre>
<p>当导入组件时，我们也可以使用不同的名字，比如<code>Foo</code>。</p>
<pre><code class="language-jsx">// 👇️ default import
import Foo from './another-file';
export default function App() {
return (
<div>
<Foo />
</div>
);
}
</code></pre>
<p>这样也会生效，但会令人疑惑，因此应该避免。</p>
<blockquote>
<p>根据我的经验，大多数现实世界的代码库只使用命名的导出和导入，因为它们更容易利用你的IDE进行自动完成和自动导入。 你也不必考虑哪些成员是用默认导出或命名导出的。</p>
</blockquote>
<h2 id="混合导入导出">混合导入导出</h2>
<p>你也可以混合匹配，下面示例的文件使用了默认导出和命名导出。</p>
<pre><code class="language-jsx">// 👇️ default export
export default function BigButton() {
return (
<button
style={{padding: '2rem 1rem'}}
onClick={() => console.log('big button')}
>
Big button
</button>
);
}
// 👇️ named export
export const SmallButton = () => {
return (
<button onClick={() => console.log('small button')}>Small button</button>
);
};
</code></pre>
<p>下面是如何导入这两个组件。</p>
<pre><code class="language-jsx">// 👇️ default and named imports
import BigButton, {SmallButton} from './another-file';
export default function App() {
return (
<div>
<BigButton />
<hr />
<SmallButton />
</div>
);
}
</code></pre>
<p>我们使用默认导入来导入<code>BigButton</code>组件，使用命名导入来导入<code>SmallButton</code>组件。</p>
<p>请注意，每个文件只能有一个默认导出，但你可以根据需要有多个命名导出。</p><br><br>
来源：https://www.cnblogs.com/chuckQu/p/16428696.html
頁:
[1]