node.js - 在 ReactJS 中使用命令行参数

Question

我想知道是否可以将命令行参数与 ReactJS（不是 react-native）一起使用。例如，是否可以输入一个简单的字符串并将其保存为变量以便显示？npm yargs 模块是我正在寻找的那种东西，但我无法让它工作，因为它产生的子进程显然在浏览器中不起作用。

编辑：我也尝试过像{process.argv[0]}在说一个h1标签中包含的东西，但没有任何显示。

Answer 1

React 对命令行参数没有任何特别之处。事实上，它主要被设计为一个 DOM 库。您可以使用 yargs 然后将值传递给 React 组件。

Answer 2

例如，您在终端或 cmd 中运行此命令

npm start -- foo

foo 是你的论点。你可以像这样打印你的

// print process.argv
process.argv.forEach(function (val, index, array) {
  console.log(index + ': ' + val);
});

在你的脚本中。

Answer 3

React 运行在客户端

React 是一个客户端库。它在浏览器上的网页中运行。最终用户不使用命令行来“运行” React，因此命令行参数对最终用户不可用。

对于开发人员

作为开发人员，您确实使用工具来启动开发服务器并启动运行 React 的浏览器。最有可能的是，您正在使用 Create React App。您可以使用环境变量将变量/参数传递给 React。具体来说，文档提供了这些示例：

# on Linux and macOS
REACT_APP_NOT_SECRET_CODE=abcdef npm start

# on Windows (cmd.exe)
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

请注意，这些变量在构建时嵌入到 React 中，此时Create React App 捆绑并构建您的应用程序（有点像编译）。这意味着如果您构建您的 React 项目，然后将输出文件传输到另一台服务器并尝试传递新变量，则什么都不会改变。

对于服务器

如果您的 React 构建文件位于服务器上，并且您希望能够将命令行参数传递给服务器并更改 React，这也是可能的，但很大程度上取决于您使用的服务软件。从广义上讲，服务器将获取运行时参数并将其传递到呈现您的 React 应用程序的模板中。然后在该页面上运行的任何 Javascript 都可以访问参数。