ReactJS: Objekt in ein Array drehen und machen

Question

Also, meine Komponente erhält ein Objekt aus einer übergeordneten Komponente und das Objekt sieht wie folgt aus:

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

In meinem Kind Komponente, ich möchte diese Daten nehmen und eine machen Eingabe für jeden einzelnen, damit ich die Werte ändern und dann die neuen Daten speichern kann.

Aktualisiert Antwort (es6 Klasse):

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

So, jetzt kann ich meine Komponenten im Sinne der Trennung das Kind Komponente entscheiden zu lassen, welche den Benutzer zeigen Felder. Danke DanneManne

Answer 1

Die Funktion componentDidMount ist genauso wie der Name angibt, nur einmal aufgerufen, nachdem die Komponente montiert wurde. Wenn die übergeordnete Komponente die untergeordnete Komponente mit aktualisierten Eigenschaften erneut rendert, ist das untergeordnete Element bereits bereitgestellt und diese Funktion wird nicht erneut aufgerufen.

Eine andere Sache zu beachten ist, dass der Zweck der componentDidMount ist, dass Sie Daten aus der DOM holen können, wenn Sie an Dinge wie offsetWidth oder offsetHeight eines anderen Elements aussehen wollen, aber wenn Sie überhaupt nicht mit dem DOM sind, Dann ist es wahrscheinlich besser, componentWillMount zu verwenden, um eine zusätzliche Manipulation des DOM zu vermeiden, da dies normalerweise der zeitaufwendigste Teil ist.

Was Sie vermissen, ist die kombinierte Verwendung von componentWillMount zusammen mit componentWillReceiveProps, die eine Funktion ist, die jedes Mal aufgerufen wird, wenn das übergeordnete Element das Kind erneut rendert.

Das Muster, das ich in der Regel gehen mit ist:

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

So ist die Logik, die Sie gerade in componentDidMount haben in die parseProps Funktion verschoben werden.