React学习：import { Fava }和 import Fava 的不同；`useBaseUrl`函数来拼接图片地址

wing872
89 阅读2分钟 
//App.js  
import React from 'react';  
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export function Fava () {  
return(

<div> <img src={useDocusaurusContext().siteConfig.favicon} /> </div> ) };

const MyComponent = () => {  
return (  
<div>  
<h1>{useDocusaurusContext().siteConfig.title}</h1>  
<div>{useDocusaurusContext().siteMetadata.siteVersion}</div>  
<div>{useDocusaurusContext().siteMetadata.docusaurusVersion}</div>  
{useDocusaurusContext().i18n.currentLocale}  
{useDocusaurusContext().siteConfig.baseUrl}  
<img src={useDocusaurusContext().siteConfig.favicon} />  
<p>{useDocusaurusContext().siteConfig.favicon}</p>  
</div>  
);  
};

export default MyComponent

//test.md
import Fava from '/src/pages/App'

<Fava />

这样test.md为何呈现出了整个App页面？我只想引用Fava组件。

根据你提供的代码，问题出在你在test.md文件中的引入方式上。

在test.md中，你使用了下面的引入语句：

import Fava from '/src/pages/App'

这种引入方式是将整个App.js文件作为一个默认导出的模块引入，并且命名为Fava。这就导致了整个App页面被渲染出来。

如果你只想引用Fava组件，而不是整个App页面，需要在test.md中使用命名导入的方式引入Fava组件：

import { Fava } from '/src/pages/App';

<Fava />;

这样就只会渲染Fava组件，而不会渲染整个App页面了。

所以，关键就在于
import { Fava } from '/src/pages/App'

import Fava from '/src/pages/App'
这二者的不同

是的，关键在于使用不同的导入方式。

  • import { Fava } from '/src/pages/App' 使用了命名导入（named import）的语法。这种方式只会导入指定的组件或变量，其他未被导入的内容不会被引入。
  • import Fava from '/src/pages/App' 使用了默认导入（default import）的语法。这种方式会将整个模块作为默认导出引入，如果模块中有默认导出（通过export default导出的内容），则默认导出的内容会被赋值给Fava变量。

在你的情况下，由于在App.js中没有使用默认导出（通过export default），所以使用默认导入的方式会导入整个模块，包括Fava组件和MyComponent组件。

如果你只想引入Fava组件，你可以使用命名导入的方式，即import { Fava } from '/src/pages/App'。这样只会引入Fava组件，而不会引入其他组件。

我在test.md引入之后，返回的img地址是localhost:3000/NBA/img/favicon.ico；导致无法显示图片，如何让拼接的图片地址是localhost:3000/img/favicon.ico？

使用useBaseUrl函数来拼接图片地址

要让拼接的图片地址是localhost:3000/img/favicon.ico，你可以对图片地址进行修改。

在MyComponent组件中，你可以使用useBaseUrl函数来拼接图片地址，该函数可以根据配置的baseUrl将相对路径转换为绝对路径。

import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';

export function Fava() {
  const faviconUrl = useBaseUrl(useDocusaurusContext().siteConfig.favicon);

  return (
    <div>
      <img src={faviconUrl} />
    </div>
  );
}

const MyComponent = () => {
  const { siteConfig, siteMetadata, i18n } = useDocusaurusContext();
  const faviconUrl = useBaseUrl(siteConfig.favicon);

  return (
    <div>
      <h1>{siteConfig.title}</h1>
      <div>{siteMetadata.siteVersion}</div>
      <div>{siteMetadata.docusaurusVersion}</div>
      {i18n.currentLocale}
      {siteConfig.baseUrl}
      <img src={faviconUrl} />
      <p>{faviconUrl}</p>
    </div>
  );
};

export { MyComponent };
export default MyComponent;

通过使用useBaseUrl函数，faviconUrl会根据配置的baseUrl进行拼接，确保生成的图片地址为localhost:3000/img/favicon.ico。

avatar
文章
阅读
粉丝