反应 - 动态 JSX ES6答案

【问题标题】：REACT - Dynamic JSX ES6反应 - 动态 JSX ES6
【发布时间】：2017-08-31 06:33:37
【问题描述】：

我被传递到一个被视为“重复”的问题，问了这个问题，并被告知要问一个新问题！所以，我试图从我解析的 JSON 文档中即时生成一些 JSX。这会构建具有不同 UI 的多种类型的表单。

我只是有一个无法修复的语法错误！

代码：

自从我第一次写这篇文章以来发生了变化！

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

【问题讨论】：

错字：return( <CodeIndex /> ); 代替
JSX 元素被转换为函数调用。 <Foo>{child}</Foo> 与 React.createElement(Foo, null, child) 相同。您不能在多个语句上“拆分”一个函数调用。将开始和结束标记视为函数调用的括号。你必须重组你的代码（和数据），这样你就可以把整个标签写成一个表达式。
@FelixKling..为什么在 React.createElement(Foo,null,child) 中有 null ......并且传递参数的顺序很重要吗？
@MukulSharma：第二个参数是道具（在我的示例中没有）。第三个和任何其他后续参数是孩子。是的，订单很重要。
@MukulSharma 的顺序是：(element, props, children)，因为那里没有任何道具，所以无效。

标签： reactjs ecmascript-6 jsx

【解决方案1】：

应该是

return( <CodeIndex /> );

代替

return( </CodeIndex > );

【讨论】：

我认为OP打算渲染组件<CodeIndex><div> Hello MUDDLE </div></CodeIndex>。
这是在菲利克斯的现场。在我的操作数堆栈中，操作数可以是多个组件。
我正在构建的应用程序有 100 多个表单，其中一些可能包含 100 多个字段。我试图将 for 渲染区分开来......就像我们将 RenderInput、RenderSelect 作为返回正确 JSX 的函数一样！我头疼！谢谢菲利克斯。