我有一个问题。如果我将JSX代码存储在一个数组中并且它包含
<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>
</Accordion>
我从构建它的函数返回它。函数解析（）。
return JSX;
并尝试在我的组件中使用它。
render() {
return(
<div>
<h2>SmartForm Parser</h2>
{this.parse(this.props.form)}
</div>
);
}
这不符合我的期望！它只是将代码渲染为屏幕的字符串。如何让它呈现真实！？
修改 组件内的完整解析（）
//---------------------------------
class SmartForm extends Component {
// this is a form description parser and renderer.
// it takes the description of a form in JSON format,
// passed in as a prop.
//-----------------
constructor(props) {
super(props);
}
//-------------------
formStart(formType) {
// each page type in a single or multi page for will have it's own
// format that has been decreed by the PROPS required by each
// form initiation.
let JSX = [];
console.log('formStart');
switch(formType) {
case 'accordion':
JSX.push("<Accordion");
JSX.push(" uniqId={'addAsset'}");
JSX.push(" {...this.props}");
JSX.push(" singleOpen={true} >");
console.log('formStart = accordion');
break;
case 'workflow':
break;
case 'modal':
break;
case 'normal':
break;
}
console.log(JSX);
return(JSX);
}
//-----------------
formEnd(formType) {
// each page type in a single or multi page for will have it's own
// format that has been decreed by the PROPS required by each
// form initiation.
let JSX = [];
switch(formType) {
case 'accordion':
JSX.push("</Accordion>");
break;
case 'workflow':
break;
case 'modal':
break;
case 'normal':
break;
}
return(JSX);
}
//-------------------
pageStart(pageType) {
// each page type in a single or multi page for will have it's own
// format that has been designed by the operations management
// and the CSS designers.
let JSX = [];
switch(pageType) {
case 'accordion':
JSX.push(" <AccordionSection ");
JSX.push(" title=Asset Summary - Mandatories ");
JSX.push(" noFunctions=12");
JSX.push(" noFunctionsDone=0");
JSX.push(" validated={true} ");
JSX.push(" required={true} ");
JSX.push(" openByDefault={true} > ");
break;
case 'workflow':
break;
case 'modal':
break;
case 'normal':
break;
}
return(JSX);
}
//-----------------
pageEnd(pageType) {
// each page type in a single or multi page for will have it's own
// format that has been designed by the operations management
// and the CSS designers.
let JSX = [];
switch(pageType) {
case 'accordion':
JSX.push("</AccordionSection>");
break;
case 'workflow':
break;
case 'modal':
break;
case 'normal':
break;
}
return(JSX);
}
//-----------
parse(form) {
// this is the main form parser
// the DESCRIPTION of the for comes into this
// component as a JSON TREE
// this parser traverses the tree and constructs the
// JSX code to be rendered in the calling CONTAINER
// these few lines of code handle ALL of the forms,
// in ALL formats, in ALL of the application, from
// now, until the end of days.
let JSX = []; // container for the JSX to be rendered
let element = ''; // outside field element of form
let pageElement = ""; // page elements
let fieldElement = ""; // each of the field objects in the page
let formFormat = ''; // snatch this value out of tree as we traverse
console.log(form);
for (element in form) { // traverse the primary elements
console.log('----------------------');
console.log(element);
switch(element) { // which element are we on?
case 'formName': // we don't care about the name in here
break;
case 'format': // we DO care about the format!
console.log(form.format);
JSX.push(...this.formStart(form.format)); // handle the form intro JSX
break;
case 'pages':
for (pageElement in form.pages) { // iterate for 1..N pages
JSX.push(...this.pageStart(form.format)); // depending on the format, each new page gets unique JSX
console.log(form.pages[pageElement]); // debugging
let pageArray = form.pages[pageElement]; // Pitman
for (fieldElement in pageArray.fields) { // iterate down the LIST
console.log(fieldElement); // debugging
let fields = pageArray.fields[fieldElement]; // Pitman again
JSX.push(...SmartRender(fields)); // and process the field - this does a LOT of work as well!
}
JSX.push(...this.pageEnd(form.format)); // finish THIS page
}
}
}
JSX.push(...this.formEnd(form.format)); // finish off the rendering
console.log(JSX); // debugging
return(JSX); // send back the code for rendering
}
//--------
render() {
let code = this.parse(this.props.form);
return(
<div>
<h2>SmartForm Parser</h2>
{code.map(function(line, key) {
return line;
}
)}
</div>
);
}
}
//-------------------------------------------------------------------------
export default SmartForm;
//----------------- EOF -------------------------------------------------
**第二次编辑**
//--------------------------
export const assetForm = {
"formName": "assetCreateEdit",
"format": "accordion",
"pages":
[{
"pageID": "1",
"title": "Asset Summary - Mandatories",
"fields":
[
{
"name": "testname",
"altName": "",
"visible": true,
"groupVisibility": "public",
"type": "text",
"component": "input",
"label": "Test Smart Input",
"placeholder": "Some default Value",
"required": "required",
"validated": false,
"data": []
},
{
"name": "password",
"altName": "",
"visible": true,
"groupVisibility": "public",
"type": "password",
"component": "input",
"label": "Test Smart Input",
"placeholder": "Password",
"required": "required",
"validated": false,
"data": []
}
]
},
{
"pageID": "2",
"title": "Asset Images - Mandatories",
"fields":
[
{
"name": "testname",
"altName": "",
"visible": true,
"groupVisibility": "public",
"type": "imageDrop",
"component": "imageDropbox",
"label": "Test Image Dropbox",
"placeholder": "",
"required": "required",
"validated": false,
"optiminstic": "optomisticPrevire",
"data": []
}
]
}
]
};
干杯， 标记
答案 0 :(得分：0)
您不需要将JSX渲染为字符串，您只需返回正常的JSX，如下所示......
您应该可以像这样重构代码。
//---------------------------------
class SomeComponent extends Component {
constructor() {
super();
this.state = {
sampleArray: ["item 1", "item 2", "item 3", "item 4"]
};
this.renderExample = this.renderExample.bind(this); // bind this to class method
}
renderExample() {
const { sampleArray } = this.state;
sampleArray.map((item, index) => {
return (
<div className={item} key={item}>
{item}
</div>
);
});
}
render() {
return (
<div id="container">
{this.renderExample()}
</div>
);
}
}
/*
This would render the following JSX
-----------------------------------
<div id="container">
<div className="item 1">
"item 1"
</div>
<div className="item 2">
"item 2"
</div>
<div className="item 3">
"item 3"
</div>
<div className="item 4">
"item 4"
</div>
</div>
-------------------------------------
HOPE THIS HELPS =]
*/