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

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

radioHTML 中没有元素。有<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是可选的。）