react方法返回html_javascript - 包含动态html的React函数返回未呈现

因此，我有一个函数可以过滤传递的参数是否为select，text或date字段，并动态添加到render jsx。

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

没有警告或错误。

这是this.getFields()传递以验证的数据的图片

// wrapped in a react class

checkType(type, options, placeholder, name, handleUpdatedValue, defvalue, index) {

let select = {options.map((option, i) => {option})};

let text =

let date =

switch(type) {

case 'select':

return select

break;

case 'text':

return text

break;

case 'date':

return date

break;

default:

console.log('Error: Invalid Type');

}

}

handleSubmit() {

}

render() {

let values = this.state.fieldValues;

const checkType = this.checkType.bind(this);

return(

{this.props.header}

{this.getFields().map((field, i) => {

{checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}

})}

onClick={() => this.props.onClick(values)} >

Save

);

}

最佳答案

{this.getFields().map((field, i) => {

{checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}

})}

您的代码不返回任何内容，因为您在函数语法中使用了花括号。要么做

{this.getFields().map((field, i) =>

{checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}

)}

要么

{this.getFields().map((field, i) => {

return (

{checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.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) =>

{checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}

);

return(

{this.props.header}

{fields}

onClick={() => this.props.onClick(values)} >

Save

);

}