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

Question

所以我有一个函数可以过滤传递的参数是选择、文本还是日期字段，并动态添加到渲染 jsx。

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

没有警告或错误。

这是this.getFields()传过来的数据图片来验证

// wrapped in a react class

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

        let select = <select onChange={handleUpdatedValue.bind(this)} >{options.map((option, i) => <option value={option} key={i}>{option}</option>)}</select>;
        let text = <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="text" />
        let date = <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="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(
        <div className="formwrapper thinshadow">    
            <h3>{this.props.header}</h3>
            {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>
            })}

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

Answer 1

{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) =>
         <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>
        );
 })}

对于干净的代码，我会将 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>  
    );
}