Javascript 未呈现包含动态html的React函数返回

因此，我有一个函数，用于过滤传递的参数是select、text还是date字段，并动态添加到renderjsx中

当我触发返回时，它不会呈现html/jsx返回。我在console.logs而不是html中进行了测试，测试成功，这告诉我switch语句的结构是正确的，并且我传递了正确的类型，只是html返回不希望呈现。没有警告或错误。当我在console.log中记录我得到的checkType函数时

没有警告或错误

下面是通过

this.getFields（）

传递的数据的图片，以进行验证

//包装在react类中
检查类型（类型、选项、占位符、名称、handleUpdatedValue、defvalue、索引）{
让select={options.map（（option，i）=>{option}）；
让文本=
出租日期=
开关（类型）{
案例“选择”：
返回选择
打破
案例“文本”：
返回文本
打破
案例“日期”：
返回日期
打破
违约：
log（'Error:Invalid Type'）；
}
}
handleSubmit（）{
}
render（）{
让值=this.state.fieldValues；
const checkType=this.checkType.bind（this）；
返回(
{this.props.header}
{this.getFields（）.map（（字段，i）=>{
{checkType（field.type、field.options、field.placeholder、field.name、this.handleUpdateValue.bind（this）、field.defvalue、field.index）}
})}
this.props.onClick（values）}>
拯救
);
}
{this.getFields（）.map（（field，i）=>{
{checkType（field.type、field.options、field.placeholder、field.name、this.handleUpdateValue.bind（this）、field.defvalue、field.index）}
})}

代码不会返回任何内容，因为在函数语法中使用了大括号。或者

{this.getFields().map((field, i) =>
         <div key={i} className={field.classes}>
                 {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
                 <div className="minilabel"></div>
         </div>
 )}

{this.getFields（）.map（（字段，i）=>
{checkType（field.type、field.options、field.placeholder、field.name、this.handleUpdateValue.bind（this）、field.defvalue、field.index）}
)}

或

{this.getFields（）.map（（字段，i）=>{
返回(
{checkType（field.type、field.options、field.placeholder、field.name、this.handleUpdateValue.bind（this）、field.defvalue、field.index）}
);
})}

对于干净的代码，我会将map函数保留在JSX标记之外：

render() {
    let values = this.state.fieldValues;
    const checkType = this.checkType.bind(this);

        const fields = this.getFields().map((field, i) =>
      <div key={i} className={field.classes}>
          {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
          <div className="minilabel"></div>
      </div>
        );

    return(
        <div className="formwrapper thinshadow">    
            <h3>{this.props.header}</h3>
                        {fields}

            <button className="btn btn-primary" 
                    onClick={() => this.props.onClick(values)} >
                    Save
            </button>
        </div>  
    );
}

render（）{
让值=this.state.fieldValues；
const checkType=this.checkType.bind（this）；
const fields=this.getFields（）.map（（字段，i）=>
{checkType（field.type、field.options、field.placeholder、field.name、this.handleUpdateValue.bind（this）、field.defvalue、field.index）}
);
返回(
{this.props.header}
{fields}
this.props.onClick（values）}>
拯救
);
}
您的检查员展示了什么？以下元素是DOM树中的
吗？@Gasim没有，太奇怪了。只有标记和按钮看起来您的问题不是
checkType
，而是
getFields
方法返回空数组。因此，我将研究
getFields
方法的定义。@Gasim我刚刚做了一个console.log，它传递了所有预期对象的数组：（我将发布一张传递数据的图片。我发现了你的问题哦，天哪……我很敬畏……谢谢你@Gasim也感谢你的建议。将以后一种方式实现。
{this.getFields().map((field, i) =>
         <div key={i} className={field.classes}>
                 {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
                 <div className="minilabel"></div>
         </div>
 )}

{this.getFields().map((field, i) => {
        return (
            <div key={i} className={field.classes}>
                    {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
                    <div className="minilabel"></div>
            </div>
        );
 })}

render() {
    let values = this.state.fieldValues;
    const checkType = this.checkType.bind(this);

        const fields = this.getFields().map((field, i) =>
      <div key={i} className={field.classes}>
          {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
          <div className="minilabel"></div>
      </div>
        );

    return(
        <div className="formwrapper thinshadow">    
            <h3>{this.props.header}</h3>
                        {fields}

            <button className="btn btn-primary" 
                    onClick={() => this.props.onClick(values)} >
                    Save
            </button>
        </div>  
    );
}