javascript - 使用 React 动态渲染组件

Question

我有一个在 3 个不同国家/地区运行的应用程序(类似于电子商务)。每个国家/地区都有一个开发团队，可以更改某些特定的组件以满足需求。我正在考虑通过上下文传递组件，但例如如何选择 Form-US 或 Form-UK ？ (认为​​动态导入在React中是不可能的)

我的App.js

import React from 'react'
import UserInput from './common/UserInput'

class App extends React.Component {

  getChildContext () {
    return {
      input: UserInput
    }
  }

  render () {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

App.childContextTypes = {
  input: React.PropTypes.object
}

export default App

我会在需要时选择组件，如下所示:

render () {
    const Input = this.context.input
    return (
        <Input placeholder='Input Test'/>
    )
}

这工作得很好，但这是一个好的做法吗？有更好的方法吗？如何将具有特定名称的组件添加到该结构中？

Answer 1

正如我们在评论中讨论的那样，有更聪明的方法可以做到这一点。但如果我今天需要解决这个问题，我会这样做:

index.js 用于“输入”

import ComponentUS from './Component-US';
import ComponentBR from './Component-BR';
import ComponentAG from './Component-AG';
import config from '../config.json';

let thingToExport;
if (config.country === 'US') {
  thingToExport = ComponentUS;
} else if (config.country === 'BR') {
  thingToExport = ComponentBR;
} else {
  thingToExport = ComponentAG;
}
export default thingToExport;

然后父级可以从index.js导入Input。