Javascript 通过变量将道具传递给组件

我有一个类组件，它呈现输入和工具提示并控制状态。

组件作业是获取单个“类型”道具，并呈现文本输入、文本区域、选择输入或复选框组组件。需要通过此SelectInputType组件传递大量的道具，其中一些道具与所有4个输入组件（例如占位符文本和必填）相关，另一些道具特定于特定输入（例如，选项仅与复选框和选择输入相关）

render（）{
常量inputProps={}；
inputProps.Placeholder文本=this.props.Placeholder文本；
inputProps.required=this.props.required；
inputProps.class=此.props.class；
inputProps.value=此.props.value；
inputProps.options=this.props.options；
inputProps.updateText=this.handleInput；
inputProps.handleFocus=this.focusIn；
inputProps.handleBlur=this.focusOut；
inputProps.handleCheckboxChange=e=>this.addCheckboxToList（e）；
inputProps.closeCheckboxSelector=此.closeCheckboxSelector；
inputProps.readableSelectedCheckboxes=this.state.readableSelectedCheckboxes；
const inputClass=classNames（'input-with-tooltip'{
焦点：this.state.focus，
“步骤完成”：this.state.completed，
});
返回(
);
}

我的SelectInputType组件如下所示

const SelectInputType = (props) => {
  let component;
  if (props.type === 'title') {
    component = <TextInput />;
  } else if (props.type === 'text') {
    component = <TextareaInput />;
  } else if (props.type === 'checkbox') {
    component = <CheckboxInput />;
  } else if (props.type === 'select') {
    component = <SelectInput />;
  }

  return (
    <div>
      {component}
      // Need to pass props through to this?
    </div>
  );
};

const SelectInputType=（道具）=>{
let组件；
如果（props.type=='title'）{
分量=；
}else if（props.type==='text'）{
分量=；
}else if（props.type===“复选框”）{
分量=；
}else if（props.type==='select'）{
分量=；
}
返回(
{component}
//需要把道具传给这个吗？
);
};

---

我正在使用JSX spread属性将道具向下传递给SelectInputType组件，但我不知道如何将这些道具传递给4个输入组件（如果我将它们传递给4个输入组件，是否会出现某些道具对特定组件无效的错误？

您也可以将组件类型保存在变量中，不是组件本身：

const SelectInputType = (props) => {
  let ComponentType;
  if (props.type === 'title') {
    ComponentType = TextInput;
  } else if (props.type === 'text') {
    ComponentType = TextareaInput;
  } else if (props.type === 'checkbox') {
    ComponentType = CheckboxInput;
  } else if (props.type === 'select') {
    ComponentType = SelectInput;
  }

  return (
    <div>
      <ComponentType {..props} />
    </div>
  );
};

const SelectInputType=（道具）=>{
让组件类型；
如果（props.type=='title'）{
ComponentType=TextInput；
}else if（props.type==='text'）{
ComponentType=TextareaInput；
}else if（props.type===“复选框”）{
ComponentType=CheckboxInput；
}else if（props.type==='select'）{
ComponentType=选择输入；
}
返回(
);
};

您可能会遇到错误。如果是这样，您可以创建实用程序函数来提取每种输入类型所需的道具：

extractTextInputProps(props) {
    const { value, className, required } = props
    return { value, className, required }
}

extractSelectInputProps(props) {
    const { value, handleBlur, updateText } = props
    return { value, handleBlur, updateText }
}

您可以从中提取一个更通用的函数，这样就不必重复属性名两次

然后在使用spread操作符创建组件时使用它们：

let component;
if (props.type === 'title') {
    component = <TextInput { ...extractTextInputProps(props) } />;
} else if (props.type === 'text') {
    component = <TextareaInput />;
} else if (props.type === 'checkbox') {
    component = <CheckboxInput />;
} else if (props.type === 'select') {
    component = <SelectInput { ...extractSelectInputProps(props) } />;
}

let组件；
如果（props.type=='title'）{
分量=；
}else if（props.type==='text'）{
分量=；
}else if（props.type===“复选框”）{
分量=；
}else if（props.type==='select'）{
分量=；
}

如果执行此操作，则会出现以下错误：警告：React.createElement:类型无效--应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。是否

TextInput

、

TextareaInput

、

CheckboxInput

和

SelectInput

都有值？有打字错误吗？或者。您的

if

语句中是否有一条肯定能吸引人？如果

props.type

不等于'title'、'text'、'checkbox'或'select'？If语句没有捕捉：）我试图严格遵守您的语法，但是如果您有默认原因，您可以通过从

let ComponentType=DefaultInput

let component;
if (props.type === 'title') {
    component = <TextInput { ...extractTextInputProps(props) } />;
} else if (props.type === 'text') {
    component = <TextareaInput />;
} else if (props.type === 'checkbox') {
    component = <CheckboxInput />;
} else if (props.type === 'select') {
    component = <SelectInput { ...extractSelectInputProps(props) } />;
}