Reactjs 将道具动态添加到材质ui选择

我有一个关于材质UI选择组件以及如何动态设置道具的问题

我正在尝试在我的CompanySelect中包装material UI Select（）组件，以便添加一些额外的样式和其他内容

主要问题 如何在材质UI选择组件上动态添加/删除disableUnderline道具

当我设置disableUnderline=null和variant='Outline'时，我得到一个警告，即disableUnderline是一个未知的道具。使用variant='standard'时，没有警告

公司选择组件代码 所以我的问题是，有没有办法不添加道具呢。类似于以下伪代码：

return (
  <Select
    {variant !== 'outlined' ? disableUnderline : null} //Pseudo code, just to show what I need
    variant={variant}
    ...
  >
    {children}
  </Select>
);

返回(
{儿童}
);

可能的解决办法 我现在看到的唯一解决方案（我的react知识有限）是在CompanySelect组件中添加一个if语句，该语句将检查是否使用了概述的变量。但是这意味着我需要在CompanySelect代码中有很多重复的代码

const CompanySelect= (props) => {
  const {
    variant,
    disableUnderline,
    children,
    ...
  } = props;

  if (variant !== 'outlined'){
    return (<Select disableUnderline={disableUnderline} variant={variant} ...> {children} </Select>);
  } else {
    return (<Select variant={variant} ...> {children} </Select>);
  }
};

const CompanySelect=（道具）=>{
常数{
变体，
禁用下划线，
儿童
...
}=道具；
如果（变量！==‘概述’）{
返回（{children}）；
}否则{
返回（{children}）；
}
};

---

有没有其他方法可以解决这个问题？

我认为正确的方法是使用

差不多

let props = {
    variant: variant,
};

// Your dynamic props
if(variant !== 'outlined') {
    props[disableUnderline] = 'your value';
}

<div>
 {
    React.cloneElement(
     Select,
     props
    )
 }
</div>

让道具={
变体：变体，
};
//你的动态道具
如果（变量！==‘概述’）{
道具[disableUnderline]=“你的价值”；
}
{
克隆元素(
选择，
道具
)
}

您可以在返回的JSX中使用扩展运算符（…），如下所示：

const CompanySelect= (props) => {
  const {
    variant,
    disableUnderline,
    children,
    ...
  } = props;

  return (
    <Select
      variant={variant}
      {...(variant !== "outlined" && { disableUnderline: true })}
    >
      {children}
    </Select>
  );
};

const CompanySelect=（道具）=>{
常数{
变体，
禁用下划线，
儿童
...
}=道具；
返回(
{儿童}
);
};

我将您的代码更改为

{…（variant！==“outline”&&{disableUnderline:disableUnderline}}

否则，variant！='“概述”。谢谢你的一句话solution@Reggi你说得对，那是个打字错误。不客气。

return (
  <Select
    {variant !== 'outlined' ? disableUnderline : null} //Pseudo code, just to show what I need
    variant={variant}
    ...
  >
    {children}
  </Select>
);

const CompanySelect= (props) => {
  const {
    variant,
    disableUnderline,
    children,
    ...
  } = props;

  if (variant !== 'outlined'){
    return (<Select disableUnderline={disableUnderline} variant={variant} ...> {children} </Select>);
  } else {
    return (<Select variant={variant} ...> {children} </Select>);
  }
};

let props = {
    variant: variant,
};

// Your dynamic props
if(variant !== 'outlined') {
    props[disableUnderline] = 'your value';
}

<div>
 {
    React.cloneElement(
     Select,
     props
    )
 }
</div>

const CompanySelect= (props) => {
  const {
    variant,
    disableUnderline,
    children,
    ...
  } = props;

  return (
    <Select
      variant={variant}
      {...(variant !== "outlined" && { disableUnderline: true })}
    >
      {children}
    </Select>
  );
};