功能无线电组件未按预期显示

Question

我正在使用功能组件创建自定义无线电组件。我让道具工作并且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;
}

Answer 1

你可以这样做

<input
  className={`radio-${props.size} radio-${props.color}`}
  type='radio'
/> 

Answer 2

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 是可选的。）