如何根据道具reactjs渲染部分渲染答案

【问题标题】：How to render parts of a render depending on props reactjs如何根据道具reactjs渲染部分渲染
【发布时间】：2020-04-12 13:12:55
【问题描述】：

我在渲染表单的一部分时尝试使用开关，但是，当我这样做时，我得到一个未定义的 e 错误，当我 console.log 输入类型道具时，我得到 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>
);

这是开关，所有的道具都沿着它传递


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;

我在哪里调用组件

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

【问题讨论】：

标签： javascript reactjs react-redux react-router

【解决方案1】：

LabelInput 中的这一行 handleMultpleChange={() => this.handleMultpleChange} AND MultipleInput 组件不正确。

您需要像这样调用该回调中的函数：() => this.handleMultpleChange() 或将函数设置为 this.handleMultpleChange。我通常更喜欢后者，因为它更短。

这样做：

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

或者：

handleMultpleChange={this.handleMultpleChange}

*PS：拼写为multiple，而不是multple

【讨论】：

现在上面的那些输入渲染没有被渲染你知道为什么@barrymichaeldoyle