我想从它的字符串名称动态呈现一个react组件。这是我所做的，但它不起作用。这能做到吗？一个例子真的会有所帮助。
string_name 是组件的名称。
var MyComponent = React.createElement(window[string_name], {});
return (
<div className="wrapper">
<div>Hello World</div>
<MyComponent/>
</div>
)
缺少关键位，我不知道它是否在任何地方都有记录，但是您需要使用 JSX 编译器的大写字母 (?) 将其识别为一种类型。
import AllComponents from 'Components';
const FooType = 'Foo';
return (
<div className="wrapper">
<div>Hello World</div>
<AllComponents[FooType] />
</div>
);
编辑 - 根据评论
class Foo extends React.Component {
render() {
return <div>Foo 123</div>;
}
};
class Bar extends React.Component {
render() {
return <div>Bar 123</div>;
}
};
class App extends React.Component {
render() {
const all = {
'Foo': Foo,
'Bar': Bar,
};
// For the sake of the demo, just randomly pick one of the two
// usually this would come from an import, or something similar
const randomKey = ['Foo', 'Bar'][Math.floor(Math.random() * 2)];
// The resolved component must begin with a capital letter
const Type = all[randomKey];
return (
<div>
<Type />
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('root'));
JSBin：http ://jsbin.com/noluyu/5/edit?js,output
编辑 2
我们典型的动态渲染组件的应用程序，通常在所有组件目录的根目录下都有一个 index.js 文件，它简单地列出了所有可能的组件：
// index.js
export Breadcrumb from './breadcrumb/Breadcrumb';
export Checkbox from './checkbox/Checkbox';
export Comment from './comment/Comment';
然后你所要做的就是：
import AllComponents from './index.js';
const myType = 'Checkbox';
const Type = AllComponents[myType];
.. later ..
return <div><Type /></div>;
您可以做的一件事是在 MyComponent 中需要一个子组件并在返回时呈现它。编写自定义函数以在 Child 中动态呈现组件，然后在 MyComponent 中要求它。
var React = require('react');
var Names = React.createClass({
render: function(){
// Map the names and loop through
var names = this.props.names.map(function(name, index){
return(
<div>
<li className="list-group-item" key={index}>
{<h4>{name[index]}</h4>}
</li>
</div>
)
});
}
});
/*We then export the Names component*/
module.exports = Names;
下面是父组件。
var React = require('react');
var Names = require('./Names');
var MyComponent = React.createClass({
/*This will set the initial state for any state the component handles. usually empty data*/
getInitialState: function(){
return {
names: ["My Component", "Your Component"]
}
},
render: function(){
return(
<div className="row">
<div className="col-md-4">
<Names names={this.state.names} />
</div>
</div>
);
}
});