Javascript 如何根据道具渲染渲染部分

我试图在呈现表单的某些部分时使用开关，但是，当我这样做时，我会得到一个错误e of undefined，当我在console.log中输入type prop时，我会得到3 undefined和实际值。 我希望知道我做错了什么

这是我试图切换到的渲染

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Input from '../InputField';
import MultipleInput from '../multipleInput';
import ImageUploader from '../ImageUploader';
import './styles.scss';

const InputMultiple = ({currentState, handleMultpleChange, removeItem})=> (
  <MultipleInput
    value={currentState.services}
    name="services"
    handleMultpleChange={() => handleMultpleChange}
    removeItem={removeItem}
  />
);

const InputImageUploader = ({ setTheState, currentState }) => (
  <ImageUploader
    setState={setTheState}
    urls={currentState.urls}
    files={currentState.files}
    isDragging={currentState.isDragging}
  />
);

const InputTextArea = ({OnChange})=>(
  <div className="accommodation_popup_innerContainer_inputContainer_div1">
    <textarea
      type="text"
      name="description"
      id="description"
      className="input accommodation_popup_innerContainer_inputContainer_div1_inputs"
      onChange={OnChange}
    />
  </div>
);

const InputSingle = ({OnChange})=>(
    <div className="accommodation_popup_innerContainer_inputContainer_div1">
        <Input
            type="text"
            name={name}
            id={labelName}
            className="input accommodation_popup_innerContainer_inputContainer_div1_inputs"
            onChange={OnChange}
        />
  </div>
);

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“../InputField”导入输入；
从“../MultipleInput”导入多个输入；
从“../ImageUploader”导入ImageUploader；
导入“./styles.scss”；
常量InputMultiple=（{currentState，handleMultpleChange，removeItem}）=>(
handleMultpleChange}
removeItem={removeItem}
/>
);
常量InputImageUploader=（{setTheState，currentState}）=>(
);
常量InputTextArea=（{OnChange}）=>(
);
常量InputSingle=（{OnChange}）=>(
);

这是开关，所有的道具都从它旁边经过

const TypeOfInput = (inputType) => {
  console.log(inputType);
  switch (inputType) {
    case 'InputMultiple': {
      return InputMultiple;
    }
    case 'InputImageUploader': {
      return InputImageUploader;
    }
    case 'InputTextArea': {
      return InputTextArea;
    }

    default: {
      return InputSingle;
    }
  }
};

const LabelInput = ({
  labelName,
  inputType,
  name,
  OnChange,
  currentState,
  setTheState,
  handleMultpleChange,
  removeItem,
}) => (
  <div>
    <div className="accommodation_popup_innerContainer_inputContainer_text">
      <label className="accommodation_popup_innerContainer_inputContainer_text_texts">
        {labelName}
      </label>
    </div>
    {TypeOfInput(
      inputType,
      name,
      OnChange,
      currentState,
      setTheState,
      handleMultpleChange,
      removeItem
    )}
  </div>
);

LabelInput.propTypes = {
  labelName: PropTypes.string.isRequired,
  onChange: PropTypes.func,
};

export default LabelInput;

常量类型输入=（输入类型）=>{
控制台日志（输入类型）；
开关（输入类型）{
案例“InputMultiple”：{
返回多个输入；
}
案例“InputImageUploader”：{
返回InputImageUploader；
}
案例“输入区”：{
返回区域；
}
默认值：{
返回输入单；
}
}
};
常数标号输出=({
labelName，
输入类型，
名称
一旦改变，
当前状态，
设定状态，
handleMultpleChange，
删除项目，
}) => (
{labelName}
{输入类型(
输入类型，
名称
一旦改变，
当前状态，
设定状态，
handleMultpleChange，
移除项目
)}
);
LabelInput.propTypes={
labelName:PropTypes.string.isRequired，
onChange:PropTypes.func，
};
导出默认标签输出；

我在哪里调用组件

<LabelInput
   labelName="Services"
   name="services"
   inputType="InputMultiple"
   OnChange={this.handleChange}
   handleMultpleChange={() => this.handleMultpleChange}
   removeItem={this.removeItem}
/>

this.handleMultpleChange}
removietem={this.removietem}
/>

您的

标签输入

和

多输入

组件中的此行

handleMultpleChange={（）=>This.handleMultpleChange}

不正确

您需要像这样调用回调中的函数：

（）=>this.handleMultpleChange（）

，或者将函数设置为

this.handleMultpleChange

。我一般比较喜欢后者，因为它比较短

这样做：

handleMultpleChange={() => this.handleMultpleChange()}

或：

---

---

*PS：它的拼写是

multiple

，而不是

multple

现在这些输入渲染没有被渲染，你知道为什么@barrymichaeldoyle

handleMultpleChange={this.handleMultpleChange}