将 key prop 从 map 传递到 React 组件

Question

节日。将这个关键道具传递给组件创建有点麻烦。代码如下：

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

我从控制台收到一条警告，提示密钥丢失并且我的任何页面都没有呈现。

提示赞赏。

Answer 1

您已将密钥 prop 传递给您创建的 Accordion 组件，但未传递给任何其他元素。您还需要将其传递给 Workflow 和 Simple 组件

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

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

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