React：将组件存储在对象中

Question

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

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

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]
}

这将是非常酷的。

Component = React.createClass({..})如果我的输入组件都是通过正常语法（例如， ）构造的，那么这个问题有一个很好的答案，但是：

A。有很多样板文件

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

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

这可能和/或可取吗？

Answer 1

您可以映射用户对象键并将它们与fieldCatalogue. 如果该键存在，则在该键处渲染组件，并将所有父组件的 props 传入：

代码笔

const fieldCatalogue = { // stateless component functions rather than React element literals
  name(props) {
    return <div>Name: {props.value}</div>
  },

  age(props) {
    return <div>Age: {props.value}</div>
  }
};

class ProfileFields extends React.Component {
  render() {
    const {userProfile} = this.props;
    return (
      <div>
        {Object.keys(userProfile).map((key) => {
          if(fieldCatalogue.hasOwnProperty(key)) {
            const FieldComponent = fieldCatalogue[key];
            return (<FieldComponent {...this.props} value={userProfile[key]}/>);
          } else {
            return null;
          }
        })}
      </div>
    );
  }
}

或者，您的字段组件可以通过返回 来处理未定义的值null。然后，您可以渲染所有这些，并且仅渲染用户对象上存在的那些。