React / JSX动态组件名称

我试图根据组件的类型动态呈现组件。

例如:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; 
// Returns <examplecomponent />  instead of <ExampleComponent />

我尝试了这里提出的React/JSX动态组件名称的解决方案

这在编译时给了我一个错误(使用browserify for gulp)。当我使用数组语法时，它期望XML。

我可以通过为每个组件创建一个方法来解决这个问题:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

但这意味着我创建的每个组件都有一个新方法。这个问题一定有更优雅的解决办法。

我很愿意接受建议。

编辑: 正如gmfvpereira最近指出的，有一个官方文档条目: https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime

当前回答

拥有一个带有大量组件的地图并不好看。事实上，我很惊讶居然没有人提出这样的建议:

var componentName = "StringThatContainsComponentName";
const importedComponentModule = require("path/to/component/" + componentName).default;
return React.createElement(importedComponentModule);

当我需要以json数组的形式加载相当多的组件时，这一个真的帮助了我。

2020-05-18 16:02:32

其他回答

编辑:其他答案更好，见评论。

我用这种方法解决了同样的问题:

...
render : function () {
  var componentToRender = 'component1Name';
  var componentLookup = {
    component1Name : (<Component1 />),
    component2Name : (<Component2 />),
    ...
  };
  return (<div>
    {componentLookup[componentToRender]}
  </div>);
}
...

2016-05-23 05:39:26

对于包装器组件，一个简单的解决方案就是使用React。直接createElement(使用ES6)。

import RaisedButton from 'mui/RaisedButton'
import FlatButton from 'mui/FlatButton'
import IconButton from 'mui/IconButton'

class Button extends React.Component {
  render() {
    const { type, ...props } = this.props

    let button = null
    switch (type) {
      case 'flat': button = FlatButton
      break
      case 'icon': button = IconButton
      break
      default: button = RaisedButton
      break
    }

    return (
      React.createElement(button, { ...props, disableTouchRipple: true, disableFocusRipple: true })
    )
  }
}

2016-08-19 18:27:04

拥有一个带有大量组件的地图并不好看。事实上，我很惊讶居然没有人提出这样的建议:

var componentName = "StringThatContainsComponentName";
const importedComponentModule = require("path/to/component/" + componentName).default;
return React.createElement(importedComponentModule);

当我需要以json数组的形式加载相当多的组件时，这一个真的帮助了我。

2020-05-18 16:02:32

假设我们有一个旗帜，与国家或道具没有什么不同:

import ComponentOne from './ComponentOne';
import ComponentTwo from './ComponentTwo';

~~~

const Compo = flag ? ComponentOne : ComponentTwo;

~~~

<Compo someProp={someValue} />

用Compo标记填充ComponentOne或ComponentTwo中的一个，然后Compo可以像React组件一样工作。

2020-02-13 23:06:05

我想出了一个新的解决办法。请注意，我使用ES6模块，所以我需要类。你也可以定义一个新的React类。

var components = {
    example: React.createFactory( require('./ExampleComponent') )
};

var type = "example";

newComponent() {
    return components[type]({ attribute: "value" });
}

2015-04-26 09:58:27

React / JSX动态组件名称

推荐文章

最新文章

标签