构建后能否为create-react-app的React生产应用传递Props配置？

能不能给构建后的应用传Props？ #

能，但你写的<div id="root" (color)="'blue'"></div>是Angular的语法，React不认这种写法。构建后的React应用是静态资源，得用这些方式传递参数：

• 全局变量注入：在引入React脚本前，在HTML里定义全局变量，React代码里读取这个变量作为Props
• HTML元素的data属性：给root元素加自定义data属性，React里通过DOM API读取
• URL查询参数：在访问应用的URL里加参数，React里解析URL获取

设置传入指定背景色的需求可行吗？ #

完全可行，下面给你两种具体实现方式：

方式一：全局变量传值

1. 修改React入口文件（src/index.js）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 读取全局配置，没有的话用默认值
const appConfig = window.appConfig || { backgroundColor: '#fff' };

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App backgroundColor={appConfig.backgroundColor} />);

2. 在src/App.js里接收Props并设置背景：

function App({ backgroundColor }) {
  return (
    <div style={{ minHeight: '100vh', backgroundColor }}>
      {/* 你的应用内容 */}
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

3. 执行npm run build构建后，修改build/index.html：

<div id="root"></div>
<!-- 先定义全局变量 -->
<script>
  window.appConfig = { backgroundColor: 'blue' };
</script>
<!-- 再引入构建后的脚本 -->
<script src="/static/js/main.xxxx.js"></script>

方式二：用HTML的data属性

1. 修改src/index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
// 读取root元素的data-bg-color属性
const bgColor = rootElement.dataset.bgColor || '#fff';

const root = ReactDOM.createRoot(rootElement);
root.render(<App backgroundColor={bgColor} />);

2. App.js的代码和方式一一致，构建后修改build/index.html：

<div id="root" data-bg-color="blue"></div>
<script src="/static/js/main.xxxx.js"></script>

注意事项 #

• 构建后的HTML文件里，脚本的引入顺序很重要：如果用全局变量，必须先定义变量再引入React脚本
• 可以根据实际场景选择传参方式，多参数用全局变量，单一简单参数用data属性更便捷

内容的提问来源于stack exchange，提问作者Tchbell