Question

我被传递到一个被认为是重复的问题，问了这个问题，然后被告知要问一个新问题！所以，我试图从我解析的JSON文档动态生成一些JSX。这会构建具有不同UI的几种类型的表单。

我只是有一个语法错误，我无法解决！

CODE：

自从我第一次写这个以来改变了！

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

    const code = this.parse(this.props.form);
    console.log("-----------------------");
    console.log("code from parse()");
    console.log("-----------------------");
    console.log(code);
    return(
            <div>
                <h2>SmartForm Parser</h2>
                {code.map(function(op, index) {                     // loop through thr I-CODE STACK
                    const CodeIndex = `${op.component}`;            // fetch the OPERAND (COMPONENT)
                    let codeProps = {};                             // properties usually for start context
                    console.log(op);
                    if (op.context == startComponent) {             // and build the appropriate JSX code
                        return( <CodeIndex  /> );
                    } else if (op.context == middleComponent) {
                        return( <div> Hello MUDDLE </div>);
                    } else if (op.context == endComponent) {        //
                        return( </CodeIndex > );
                    } else {
                        alert('Malformed I code in code stack');    // something crook in the code stack
                    }
                  });
                }
            </div>
    );
}

抛出的错误是

    + 1075 hidden modules

ERROR in ./src/containers/smartForm.js
Module build failed: SyntaxError: Unexpected token (280:37)

  278 |                             return( <div> Hello MUDDLE </div>);
  279 |                         } else if (op.context == endComponent) {        //
> 280 |                             return( </CodeIndex > );
      |                                      ^
  281 |                         } else {
  282 |                             alert('Malformed I code in code stack');    // something crook in the code stack
  283 |                         }

Answer 1

应该是

return( <CodeIndex /> );

而不是

return( </CodeIndex > );

REACT - 动态JSX ES6

1 个答案: