Question

我的方案如下：

我有一个<PasswordInput>组件hide，可以切换输入字段type是设置为text还是password。

现在我定义了几个products，为每个产品定义，如果该道具应设置为true|false。

/products
  /prodA
    config.js
  /prodB
    config.js
  /prodC
    config.js

这些config.js文件中的每一个都包含类似的内容：

export default {
  FEATURES: {
    hidePasswordByDefault: true,
  }
}

// or 

export default {
  FEATURES: {
    hidePasswordByDefault: false,
  }
}

使用特殊的webpack配置，我通过process.env为当前编译的产品添加别名，以便通过

包含当前的产品配置

import Product from "product/config"

然后我理论上可以导出呈现<PasswordInput>组件的父组件中的配置：

import Product from "product/config"

const SignIn = (props) => (
  <div>
    <PasswordInput hide={Product.FEATURES.hidePasswordByDefault}/>
  </div>
)
export default SignIn

但这似乎是不好的风格。

另一种选择是使用React context从根<Product>组件向下传播它。但我不理解使用上下文。

我能想到的最后一个选项是通过来自根Product组件的道具传递产品。但是我怎样才能确保道具传给最后一个孩子？

我不想在组件级别包含产品配置的另一个原因是它可以非常轻松地在我的特定webpack配置中创建循环引用。

使全局配置可用于响应组件

0 个答案: