如何在反应中动态更改配置文件中的值？

Question

我有一个模板，其中包含 config.js 文件，该文件加载主题配置我想添加从 Light 模式到 Dark 模式的切换开关。当您在 config.js 中进行更改时，主题会发生变化，但我不知道如何动态更改 config.js 中的值。

我计划在索引文件中进行切换。

config.js

export default {
    defaultPath: '/dashboard/default',
    basename: '',
    layout: 'vertical',
    preLayout: '', 
    collapseMenu: false,
    layoutType: 'dark', // menu-light
    navIconColor: true,
    headerBackColor: 'header-default', // header-dark
    navBackColor: 'navbar-dark', // navbar-dark
    navBrandColor: 'brand-dark', // brand-dark
    navBackImage: false, 
    rtlLayout: false,
    navFixedLayout: true,
    headerFixedLayout: false,
    boxLayout: false,
    navDropdownIcon: 'style1', 
    navListIcon: 'style1',
    navActiveListColor: 'active-*', // active-dark
    navListTitleColor: 'title-default', // title-dark
    navListTitleHide: false,
    configBlock: false,
    layout6Background : 'linear-gradient(to right, #A445B2 0%, #D41872 52%, #FF0066 100%)',
    layout6BackSize : '', 
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import {Provider} from 'react-redux';
import {BrowserRouter} from 'react-router-dom';

import App from './App/index';
import * as serviceWorker from './serviceWorker';
import reducer from './store/reducer';
import config from './config';

const store = createStore(reducer);

const app = (
    <Provider store={store}>
        <BrowserRouter basename={config.basename}>
            {/* basename="/datta-able" */}
            <App />
        </BrowserRouter>
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

Answer 1

您可以通过using the state hook 来完成它。这是一个示例（您可以在此处查看我的代码：https://codesandbox.io/s/thirsty-keller-cjqb8）：

// put this in config.js
const initialConfig = {
  darkMode: true
};

const App = () => {
  // dark mode is initally true, because we used the config value as inital value for darkMode
  const [darkMode, setDarkMode] = useState(initialConfig.darkMode);

  // change handler that is invoked when we change the value of the checkbox
  const changeMode = ({ currentTarget: { checked } }) => setDarkMode(checked);

  return (
    // use className based on the value of darkMode
    <div className={darkMode ? "darkMode" : ""}>
      <label>
        <input checked={darkMode} type="checkbox" onChange={changeMode} />
        use dark mode
      </label>
    </div>
  );
};

我使用配置作为初始值。但是，您需要一个状态来存储当前处于活动模式的信息。