为什么我在我的网站上添加终端（以及您也可以这样做）？

作为一名软件工程师，我一直想在我的个人网站上添加一些元素，既能展示我的技能，又能增添一丝“书呆子”的气息。于是，我着手构建了一个包含自定义命令的静态终端。

此 React 组件也作为 NPM包发布，供任何想要将其添加到其应用程序的人使用。

显示详细信息

安装

npm install react-terminal使用 NPM或 YARN安装它yarn add react-terminal。

用法

只需声明commands对象（键值对，其中值可以是字符串或回调）并将其作为道具传递给组件：

import { ReactTerminal } from "react-terminal";

function MyComponent(props) {
  // Define commands here
  const commands = {
    whoami: "jackharper",
    cd: (directory) => `changed path to ${directory}`
  };

  return (
    <ReactTerminal
      commands={commands}
    />
  );
}

另外，请确保将应用程序挂载点包裹起来TerminalContextProvider。这样即使组件卸载后再重新挂载，状态也能保留：

import { TerminalContextProvider } from "react-terminal";

ReactDOM.render(
  <TerminalContextProvider>
    <App/>
  </TerminalContextProvider>,
  rootElement
);

有关道具的完整列表，请查看自述文件。

演示：

演示链接

如果您发现此库中有错误，请在此处提交 GitHub 问题。

鏂囩珷鏉yu簮锛�https://dev.to/bony2023/why-i-added-a-terminal-on-my-website-and-how-you-can-do-it-too-nd5