我正在尝试实现一种从我的React应用程序中的某些文件中读取配置的解决方案...不知道什么是最佳实践，但是我采用了以下方式并尝试实现它：

1）在我的应用程序的根目录下（与webpack.config.js并行），我创建了一个名为config.dev.json的文件，内容如下：

{“ protocol”：“ http”，“ host”：“ localhost”，“ port”：“ 8080”}

2）向webpack.config.js添加了我的代码（末尾的TODO部分）：

 const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const rtlcss = require('rtlcss');
const webpack = require("webpack");

const useExternalCss =
  process.env.CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS === 'true';

const useStyleSourceMap =
  process.env.CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP === 'true';

const useRtl = process.env.CARBON_REACT_STORYBOOK_USE_RTL === 'true';

const styleLoaders = [
  {
    loader: 'css-loader',
    options: {
      importLoaders: 2,
      sourceMap: useStyleSourceMap,
    },
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: () => {
        const autoPrefixer = require('autoprefixer')({
          browsers: ['last 1 version', …

我有一个文件夹，其中包含 json 文件的子文件夹。

我需要编写一个 bash 脚本，将所有 json 文件组合成一个大的有效 json。

1）首先尝试使用 jq 将所有 json 文件首先合并到每个目录中，稍后我需要再次将所有文件合并到一个大文件中。我没能成功。我使用了这个命令：

jq -rs 'reduce .[] as $item ({}; . * $item)'

2）其他选项是在开头创建一个带有“[”的json文件 --> 处理所有目录中的所有文件，并为每个文件附加内容 --> 在末尾附加“]”。

仅使用 jq 可以通过第一种方式获得相同的结果吗？

我有一个要导入我的应用程序的功能组件，但我得到：

不变违反元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查 的渲染方法ProjectDropContainer。

这是一个沙箱：

https://codesandbox.io/s/brave-voice-bdrx0

我尝试像这样导入 ProjectDropContainer：

import ProjectDropContainer from "./ProjectDropContainer";

或者像这样：

import {ProjectDropContainer} from "./ProjectDropContainer";

但还是一样！

我尝试根据（并且正在运行）的示例是：

https://codesandbox.io/s/github/emyarod/carbon/tree/dnd-uploader-codesandbox/packages/react/examples/drag-and-drop-file-uploader

我的 App.js 中有这个路由器：

<Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyApp'}>
                <Switch>
                    <Route path="/" exact component={HomePage} />
                    <Route path="/login" component={Login} />
                    <Route path="/editProject" /*render={(props) => <ProjectEdit {...props} history={props.history} />}*/ component={ProjectEdit} />
                    {/*<Redirect path="*" to="/" />*/}
                </Switch>
            </Router>

从 HomePage 组件我使用 < ProjectsList> 组件，其中有 < Project> 组件。在 < Project> 组件中，我有一个用于编辑项目的菜单选项，我正在尝试在那里使用：

 <OverflowMenuItem itemText="Edit" href="#" onClick={ () => this.props.history.push('/editProject')}/>

但我发现道具是未定义的！

解析度：

我history= {this.props.history}按以下顺序将 props.history 作为道具传递：

首页->项目列表->项目