React：将组件存储在对象中

我的用户配置文件中有几十个字段，我正在尝试构建一种有效的方法来在适当的输入表单组件中显示它们。

例如，配置文件可能如下所示：

profile1={
  name: 'Cornelius Talmadge',
  phone: '1'
}

如果我可以像这样堆叠组件......

export const FieldCatalogue = {
  name: <TextField defaultValue={this.state.userProfile.name} label={"Name"} />
}

...然后我可以做这样的事情：

for (let field in Object.keys(profile1)) {
  return FieldCatalogue[field]
}

这将是非常酷的。

这个问题 https://stackoverflow.com/questions/30762734/multiple-react-components-in-a-single-module如果我的输入组件都是通过正常语法构造的（例如，Component = React.createClass({..})), but:

A。有很多样板文件

b.我必须向每个人传递大量道具，这不是最佳选择

对我来说，完美的情况基本上是将输入组件几乎作为字符串传递，这样它们就会落入它们渲染的任何父组件的范围（状态、道具等）中。

这可能和/或可取吗？

对我来说，完美的情况基本上是传递输入 组件几乎作为字符串，这样它们就落入了范围 它们渲染的任何父组件的（状态、道具等）。

这可能和/或可取吗？

是的，这实际上是可能的！不，我不认为这是我真正会使用的东西。但它确实有效，而且看起来很酷。在我的示例中，FieldCatalogue 组件显然没有自己单独的this.state对象，但通过将它们绑定到父组件this他们自动继承正确的上下文。

请注意，如果组件被定义为箭头函数，则该示例将不起作用，因为箭头函数永远不会有自己的this对象。

哦，还有钥匙<Tmp key={i} />之所以存在，是因为当我们循环遍历数组时，我们需要为 React 提供某种标识符。

我必须尝试将此作为练习，这非常简洁：

https://jsfiddle.net/dannyjolie/e9s09xrm/ https://jsfiddle.net/dannyjolie/e9s09xrm/

const FieldCatalogue = {
  name: function() {
    return <input defaultValue = {this.state.userProfile.name} label = {"Name"}/>;
  },
  age: function() {
    return <input defaultValue = {this.state.userProfile.age}/>;
  }
}
const App = React.createClass({
  getInitialState: function() {
    return {
      userProfile: {
        name: 'Name in parent state',
        age: 'Age in parent state'
      }
    };
  },
  render: function() {
    let content = Object.keys(FieldCatalogue).map((objkey, i) => {
      let Tmp = FieldCatalogue[objkey].bind(this)
      return <Tmp key = {i} />;
    });
    return <div>{content}</div>);
  }
});

这样一来this父组件的上下文被传递给 FieldCatalogue 组件，它就可以正常工作了。虽然真的不确定这是否是一件好事。