reactjs Docusaurus 2如何在导航栏中添加自定义React组件

moiiocjp 于 2022-11-22 发布在 React

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

在docusaurus文档中，导航栏项目只能有某些类型，如链接、下拉和搜索。
我如何添加自定义按钮，就像我想添加登录按钮一样？

reactjs

来源：https://stackoverflow.com/questions/69173994/docusaurus-2-how-to-add-custom-react-component-in-navbar

2条答案

按热度按时间

kuhbmx9i1#

这实际上取决于您希望从添加到导航栏的项目中看到的功能类型，但开发模式在不同的实现中应该是相似的。
如果您试图在用户单击自定义按钮时触发类似登录模态的事件，则可以在docusaurus.config.js中指定以下内容：

module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          href: '#login',
          label: 'Login'
        }
      ]
    }
  },
  scripts: [
    'https://yourdomain.com/customscript.js'
  ]
};

然后，在脚本customscript.js中，可以包含以下内容：

document.querySelector('[href="#login"]')
  .addEventListener('click', () => {
    console.log('Login button clicked.');
  });

Docusaurus要求在每个导航栏项上指定href或to，这就是为什么我选择了这个奇怪的选择器，但是如果你愿意，你也可以在项上指定className，然后也用它作为选择器。如果你希望项不是链接，你可以在自定义脚本中设置outerHTML或使用replaceWith()。
请记住，根据站点路由的配置方式，如果React将链接节点重新写入DOM，则可能需要重新应用自定义脚本中的逻辑。
据我所知，目前还没有一个完美的方法来实现这一点，但v2也仍在开发中，所以插件的暴露是越来越好的每一个版本。