动态添加一个 prop 到 Reactjs material ui Select

Question

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

我正在尝试将 material UI Select (https://material-ui.com/components/selects/) 组件包装在我的公司中Select 这样我就可以添加一些额外的样式和其他东西。

主要问题

如何动态 add/remove material UI Select 组件上的 disableUnderline 属性。

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

公司Select 组件代码

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，默认下划线被删除，如输入 API 页面中所述。 (https://material-ui.com/api/input/)。

当我使用 outlined 变量时出现问题，因为 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 语句，该语句将检查是否使用了概述的变体。但这意味着我需要在公司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>);
  }
};

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

Answer 1

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

类似

let props = {
    variant: variant,
};

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

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

Answer 2

您可以像这样在返回的 JSX 中使用扩展运算符 (...)：

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

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

动态添加一个 prop 到 Reactjs material ui Select

Dynamically add a prop to Reactjs material ui Select

reactjs

material-ui

react-props

react-component

主要问题

公司Select 组件代码

标准用法

用法概述

可能的解决方案