Question

我的用户中有几十个字段＆＃39;配置文件，我试图建立一个有效的方法，在适当的输入表单组件中显示它们。

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

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({..})），但是：

一个。这是很多样板

湾我必须将道具丰富地传递给每一个，这不是最佳的

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

这是可行和/或可取的吗？

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

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

Answer 2

您可以映射用户对象键，并将它们与fieldCatalogue中的相应组件相匹配。如果该键存在，则在该键处渲染组件并传递所有父组件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来处理未定义的值。然后，您可以渲染所有这些，并且只渲染用户对象上存在的那些。

React：在对象

2 个答案: