Question

G＆＃39;天。我正在尝试使用react，redux，redux-for和我自己的例程来构建动态表单。我循环遍历表单的JSON中的描述，然后在我的解析器中构建JSX。

当我最终回到调用组件时，它只是呈现为一个大字符串！

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet"
 type="text/css"
 href="css/looping.css">

<script src="looping.js"> </script>
</head>


<body>

<button id="filler" onclick="myFunction()"> Fill in the box </button>

<div id="Obelix">
<div id="Asterisk">

</div>
</div>

调用组件执行此操作

render（）{const {handleSubmit} = this.props;

返回（

添加资产

<Accordion uniqId={'addAsset'} {...this.props} singleOpen={true} > <AccordionSection title=Asset Summary - Mandatories noFunctions=12 noFunctionsDone=0 validated={true} required={true} openByDefault={true} > <p>RenderInput</p><p>RenderInput</p></AccordionSection> <AccordionSection title=Asset Summary - Mandatories noFunctions=12 noFunctionsDone=0 validated={true} required={true} openByDefault={true} > </AccordionSection></Accordion>

SmartForm执行此操作

    <div className="col-sm-12">
        <form  className="form-horizontal" onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <div className="well">
                <SmartForm form={assetForm}   />
            </div>
            <div>
                <button type="submit" id="createSave" className="btn btn-info btn-space next">Create & Save</button>
                <button type="submit" className="btn btn-info btn-space next">Save & Close</button>
                <button type="submit" className="btn btn-success btn-space next">Save & Publish</button>
                <button type="submit" className="btn btn-danger btn-space next">Close</button>
                <button type="submit" className="btn btn-space next">More</button>
            </div>
        </form>
    </div>
</div>
    );

和parse是一个帮助器，它返回一个数组（我认为是可以渲染的代码行）。

我得到了一些非常错误的东西。任何帮助表示赞赏。

Answer 1

您需要使用dangerouslySetInnerHTML在JSX中呈现原始HTML。

createMarkup() {
  return {__html: 'First &middot; Second'};
}
render() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

重要的是你必须在一个带有__html键的对象中返回它。

使用React构建动态表单

添加资产

1 个答案: