Функциональный радиокомпонент не отображается должным образом - PullRequest
Новая
       22

Функциональный радиокомпонент не отображается должным образом

0 голосов
/ 11 ноября 2019

Я создаю пользовательский радиокомпонент, используя функциональный компонент. Я заставляю реквизит работать, а css работает, но я не вижу фактической «радиокнопки».

пожалуйста, посмотрите на мой код - чего мне здесь не хватает. 

type Props = {
  children: any,
  color?: string,
  size?: string,
}

const Radio = (props:Props) => {

  let radioClass = ''
    if(props.size === 'small') radioClass = 'radio-small';
    if(props.size === 'large') radioClass = 'radio-large';
    
    
    if(props.color === 'secondary') radioClass += ' radio-secondary';
    if(props.color === 'warning') radioClass += ' radio-warning';
    if(props.color === 'light') radioClass += ' radio-light';
    if(props.color === 'dark') radioClass += ' radio-dark';         

  return (
    <radio className={radioClass} > {props.children}</radio> 
  );
};

export default Radio
.radio-small  {
  font-size: 1.5em;
  
}


.radio-warning {
  color: red;
}

Ответы [ 2 ]

1 голос
/ 11 ноября 2019

Вы можете сделать это так 

<input
  className={`radio-${props.size} radio-${props.color}`}
  type='radio'
/>
1 голос
/ 11 ноября 2019

В HTML нет элемента radio. Там <input type="radio">. Кроме того, у input элементов не может быть потомков, поэтому вы, вероятно, хотели бы label вокруг этого.

Так что это было бы что-то вроде: 

return (
    <label>
        {props.children}
        <input type="radio" className={radioClass} />
    </label>
);

Примечание: Вы можете сделать radioClass проще: 

const {size, color} = this.props;

let radioClass = '';
if (size === 'small' || size === 'large') {
    radioClass += `radio-${size}`;
}

if (color === 'secondary' || color === 'warning' || color === 'light' || color === 'dark') {
    radioClass += ' radio-${color}`;
}

или , если вы знаете, что props.size и props.color всегда будут иметь допустимые значения, просто: 

const radioClass = `radio-${size} radio-${color}`;

... но ваш код, похоже, защищался от отсутствия или недействительности size и color. (Я предположил, что по крайней мере color необязательно.)

...