ReactJS：将对象转换为数组并渲染

Question

所以，我的组件从父组件接收一个对象，该对象如下所示：

{ 
  _id: Data.now(), // MongoDB database
  name: "",
  description: "",
  image: "images/image.jpg",
  type: "image"
}

在我的子组件中，我想获取这些数据并为每个数据进行输入，这样我就可以更改值，然后保存新数据。

更新答案（es6 类）：

constructor(props) {
  super();
  this.state = {
    fieldGroups: []
  }

  this.parseProps = this.parseProps.bind(this);
}

componentWillMount() {
  this.parseProps(this.props);
}

componentWillReceiveProps(nextProps) {
  this.parseProps(nextProps);
}

parseProps(props) {
  var fieldsArray = [];
  var content = props.content;
  Object.keys(content).map((field,index) => {
    if (field === 'type') {
      let fieldObj = {};
      fieldObj.field = field;
      fieldObj.value = content[field];
      fieldObj.key   = props.content._id + field;
      fieldsArray.push(fieldObj);
    }
  });
  this.setState({
    fieldGroups: fieldsArray
  });
}

render() {
  return (
    {
      this.state.fieldGroups.map((field) => {
       if (field.field === "type") { 
         return ( html element specific to type )
       } else {
         return ( a different html element )
       }
     })
    }
  )
}

所以现在我可以在让子组件决定向用户显示哪些字段的意义上分离我的组件。谢谢 DanneManne

Answer 1

函数componentDidMount 顾名思义，只在组件挂载后调用一次。但是，如果父组件使用更新的属性重新渲染子组件，则子组件已经挂载并且不会再次调用该函数。

另外需要注意的是componentDidMount 的目的是如果你想查看另一个元素的offsetWidth 或offsetHeight 之类的东西，但如果你没有使用DOM，那么您最好使用componentWillMount 来避免对 DOM 的额外操作，因为这通常是最耗时的部分。

您缺少的是 componentWillMount 和 componentWillReceiveProps 的组合用法，这是一个每次父级重新渲染子级时都会调用的函数。

我通常采用的模式是：

  constructor(props){
    super();
    this.parseProps = this.parseProps.bind(this);
  }

  componentWillMount() {
    this.parseProps(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.parseProps(nextProps);
  }

  // === Parsing Props
  //
  //  Takes care of component specific adjustment of
  //  props that parent components does not need to
  //  know about. An example can be sorting or grouping
  //  of records.
  //
  parseProps(props) {
    this.setState({
      // key: props.key
    });
  }

因此您当前在componentDidMount 中拥有的逻辑可以移动到parseProps 函数中。