Динамически добавить опору к Reactjs материалу Выберите

Question

У меня есть вопрос о компоненте выбора пользовательского интерфейса материала и о том, как динамически устанавливать реквизиты.

Я пытаюсь обернуть компонент выбора пользовательского интерфейса материала (https://material-ui.com/components/selects/) в моем CompanySelect, чтобы я мог добавить некоторые дополнительные стили и другие вещи.

Основной вопрос

Как можно динамически добавлять / удалять опцию disableUnderline в компоненте UI выбора материала.

Когда Я устанавливаю disableUnderline = null и variable = 'outlined'. Я получаю предупреждение о том, что disableUnderline - неизвестная опора. при использовании варианта = «стандартный» предупреждение отсутствует.

Код компонента 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 подчеркивание по умолчанию удаляется, как описано на странице API ввода. (https://material-ui.com/api/input/).

Проблема возникает, когда я использую описанный вариант, потому что тогда Select наследует OutlinedInput API. Если вы посмотрите на OutlinedInput API (https://material-ui.com/api/outlined-input/), то увидите, что у него нет свойства disableUnderline.

Я дал команде disableUnderline значение по умолчанию 'null', предполагая, что оно будет не рендерится, когда не поставляется. Но при использовании варианта Outlined (без disableUnderline prop) я получаю следующее предупреждение:

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.

Так что мой вопрос, есть ли способ вообще не добавлять prop. Что-то вроде следующего псевдокода:

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

Возможное решение

Единственное решение, которое я вижу сейчас (мои знания о реакции ограничены) - это добавление оператора if в компоненте CompanySelect, который будет проверять, Выделенный вариант используется или нет. Но это означает, что в коде 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

Вы можете использовать оператор распространения (...) в возвращенном JSX следующим образом:

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

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

Answer 2

Я думаю, что правильный способ - использовать React.cloneElement

Что-то вроде

let props = {
    variant: variant,
};

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

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