向Reactjs材质ui选择中动态添加道具

Question

我对材质的UI Select组件以及如何动态设置道具有疑问。

我正在尝试将材料UI Select（https://material-ui.com/components/selects/）组件包装到CompanySelect中，以便可以添加一些其他样式和其他内容。

主要问题

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

[当我设置disableUnderline = null和variant ='outlined'时，我收到一条警告，表明disableUnderline是未知的道具。当使用variant ='standard'时，没有警告。

CompanySelect组件代码

import React from 'react';
import Select from '@material-ui/core/Select';
import PropTypes from 'prop-types';
import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
import './style.scss';

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

  return (
    <Select
      disableUnderline={disableUnderline}
      variant={variant}
      ...
    >
      {children}
    </Select>
  );
};

CompanySelect.propTypes = {
  variant: PropTypes.oneOf(['outlined', 'filled', 'standard']),
  disableUnderline: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};

CompanySelect.defaultProps = {
  variant: 'standard',
  disableUnderline: null,
};


export default CompanySelect;

标准用法

<AtriasSelect variant="standard" disableUnderline>
  <MenuItem />
  <MenuItem />
</AtriasSelect>

概述的用法

<AtriasSelect variant="outlined">
  <MenuItem />
  <MenuItem />
</AtriasSelect>

标准用法有效。使用disableUnderline时，默认的下划线将被删除，如Input API页面上所述。 （https://material-ui.com/api/input/）。

问题在我使用概述的变体时发生，因为然后Select继承了OutlinedInput API。如果您查看OutlinedInput API（https://material-ui.com/api/outlined-input/），则可以看到它没有disableUnderline属性。

我给disableUnderline属性设置了默认值'null'，假设它在未提供时不会呈现。但是，当使用Outlined变体（不带disableUnderline属性）时，会收到以下警告。

React does not recognize the `disableUnderline` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableunderline` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

所以我的问题是，有没有办法完全不添加道具。类似于以下的伪代码：

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

可能的解决方案

我现在看到的唯一解决方案（我的反应知识有限）是在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>);
  }
};

也许还有另一种解决这个问题的方法吗？

Answer 1

我认为正确的方法是使用React.cloneElement

类似

React.cloneElement

Answer 2

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

let props = {
    variant: variant,
};

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

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