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中获取数据，但是如果你根本不使用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中您当前拥有的逻辑可以移到// Will not work here function findCommonNumbersInArrays(arOne, arTwo) { var cm = []; for (var i = 0; i <= arOne.length; i++) { if (arTwo.every(a => a === arOne[i])) { cm.push(arOne[i]); } } return cm; } console.log('These are the common numbers: ' + findCommonNumbersInArrays([1, 2, 3, 4, 5], [3, 4, 6, 7, 8])); // Works here function common(arOne, arTwo) { var cm = []; for (var i = 0; i <= arOne.length; i++) { if (!arTwo.every(a => a !== arOne[i])) { cm.push(arOne[i]); } } return cm; } console.log('These are the common numbers :' + common([1, 2, 3, 4, 5], [3, 4, 6, 7, 8]));函数中。

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

1 个答案: