React：将组件存储在对象中答案

【问题标题】：React: storing components in an objectReact：将组件存储在对象中
【发布时间】：2016-03-17 23:05:12
【问题描述】：

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

例如，个人资料可能如下所示：

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

这将是超级酷。

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

一个。这是很多样板

b.我必须将大量道具传递给每个人，这不是最佳的

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

这可能和/或可取吗？

【问题讨论】：

标签： reactjs react-jsx

【解决方案1】：

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

这可能和/或可取吗？

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

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

哦，<Tmp key={i} /> 中的键就在那里，因为我们需要在循环数组时为 React 提供某种标识符。

我不得不尝试这个作为练习，这非常简洁：

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>);
  }
});

这样，父组件的thiscontext 被传递给 FieldCatalogue 组件，它就可以工作了。真的不确定这是否是一件好事。

【讨论】：

【解决方案2】：

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

CodePen

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 来处理未定义的值。然后您可以渲染所有这些，并且只渲染用户对象上存在的那些。

【讨论】：