Schlüssel Prop in React Komponente von Karte

Question

G'Day übergeben. Ein bisschen Mühe, das richtige zu bekommen, war, diese Schlüsselrequisite in die Komponentenerstellung zu übergeben. Hier ist der Code:

//-------- 
render() { 

    const that = this;             // Javascript scope voodoo 
    const CS = that.parse(this.props.form);        // CS, or CODE STACK, is the result of a parser that 
                     // acts on a JSON description of the form. 
                     // It is not QUITE true as CS is a stack of objects 
                     // that contain data one WOULD push onto the STACK 
                     // SEGMENT in a proper compiler. 
    //console.log(CS); 

    return(
      <div> 
       <h2>SmartForm Parser</h2>        
       {CS.map(function(op, CI) {        // traverse the CODE SEGMENT and use the CODE INDEX 
        console.log(op);         // see what we re mapping to 
        switch (op.component) {        // what type of operation is this 
         case 'Accordion': {        // Accordion in a FORM, OK 
          let children = that.pages(op);    // build the children 
          console.log("About to create accordion"); // debugging 
          console.log("with children");    // debugging 
          console.log(children);      // debugging 
          console.log(op.props); 
          React.createElement(Accordion,    // construct the parent with ALL nested CHILDREN after 
               {key: CI},    // doing a TDSR evaluation of the OPERAND 
               children);    // N ACCORDION pages, N2 input fields 
          break; 

         } 
         case 'Workflow': { 
          let children = that.pages(op);    // build the children 
          React.createElement(Workflow,    // and create the complex sheet element 
               {classname: workflow}, 
               children);    // N SLIDING pages, N2 input fields 
          break; 
         } 
         case 'Simple': { 
          let children = that.pages(op);    // build the children 
          React.createElement(Simple, 
               {classname: simple}, 
               children);    // One page, N input fields 
          break; 
         } 
        } 
       })} 
      </div> 
    ); 
} 

ich eine Warnung von der Konsole erhalten, dass der Schlüssel fehlt und keiner meiner Seiten gerendert werden.

Hinweise geschätzt.

Answer 1

Sie haben einen Schlüssel prop an die von Ihnen erstellte Accordion-Komponente übergeben, jedoch nicht an ein anderes Element. Sie müssen diese Komponente zu Workflow und Simple passieren auch

React.createElement(Accordion,   
       {key: CI},    
       children); 

React.createElement(Workflow,   
       {classname: Workflow, key: CI},    
       children); 

React.createElement(Simple,   
       {classname: simple, key: CI},    
       children);