Question

我正在尝试从集合中创建组件：

    var sections = [
       {name: 'EditStudentBasicDetails',key: 1, title: 'Basic Details', sectionData: this.state.studentData.activeData.basicDetails},
        {name: 'EditStudentAgentsInfo', key: 2, label: 'Agents Info', sectionData: this.state.studentData.activeData.agentsInfo },

我可以通过映射上面的集合来创建以下组件吗？

    <Tabs activeKey={this.state.activeTabId} onSelect={this.handleSelect} bsStyle="tabs">
         <Tab eventKey={1} title="Basic Details"  >
              <EditDetails studentId={this.state.studentId} sectionData={this.state.studentData.activeData.basicDetails} />
        </Tab>
        <Tab eventKey={2} title="Agents Info">
            <EditMoreDetails studentId={this.state.studentId} sectionData={this.state.studentData.activeData.agentsInfo} />
        </Tab>

如何使用`map？

创建组件'EditMoreDetails'

这样的东西？

{this.sections.map(function(section) {
                    return  <Tab key={key} title={title}  >
                                <{name} sectionData={this.state.studentData.activeData.basicDetails} />
                            </Tab>;
})}

Answer 1

当您执行<EditDetails/>时，您实际上正在调用React.createElement(EditDetails)，EditDetails不是字符串，而是ReactClass函数。

您可以在部分对象上添加ReactClass而不是其字符串名称：

const sections = [{Component: EditDetails}, ...]

然后将数据映射到组件时：

sections.map(section => <section.Component/>)

如果您不想在数据中添加组件，可以创建一个哈希表来将字符串映射到组件：

const componentTable = {
  EditDetails: EditDetails,
}

然后做：

sections.map(section => {
  const Component = componentTable[section.name]
  return <Component/>  
})

Answer 2

React并不支持这种＆＃34;插值＆＃34;或＆＃34;注册表＆＃34;这就是为什么你不能基于字符串渲染组件的原因。

您可以进行正常的window[name]舞蹈，但通常不建议这样做。

我猜想一个简单的switch就足以满足你的用例。

{this.sections.map(function(section) {
    return <Tab key={key} title={title}  >
        switch(name) {
        case "EditDetails":
            return <EditDetails sectionData={this.state.studentData.activeData.basicDetails} />;
        }
    </Tab>;
})}

A bit of good reading where rendering components from strings are discussed.

从集合中创建动态组件

2 个答案: