value 属性在 React Typescript 的输入 type="checkbox" 中不显示任何内容

Question

我试图在 React Typescript 中的复选框旁边显示一些文本，并且 value 属性不起作用。如果我尝试设置任何 innerHTML，那么它会给我一个错误 input is a void element tag and must neither have children nor use dangerouslySetInnerHTML. 我该怎么办？

interface LetterOptionsProps{
    letterOptions:any

}

export default class LetterOptions extends Component<LetterOptionsProps>{
    render(){
        if(this.props.letterOptions.length>0){
            
        return(
            this.props.letterOptions.map((a:any, i:any) => {
                return (
                            <React.Fragment>
                                <input key={i} className="letter-option" type="checkbox" value={a} /> 
                            </React.Fragment>
               
                        );
                    }
                )
        );
        }else{
            return(<div></div>);
            
        }
    }
}

Answer 1

听起来您希望输入具有标签。正如错误指出的那样，输入是无效返回，不能有任何子项。

另外，仅供参考，React 键应放置在被包装的最外层元素上，即 React.Fragment（如果您仍在使用它）或 label，如下所示。

this.props.letterOptions.map((a:any, i:any) => (
  <label key={i}>
    {a}
    <input className="letter-option" type="checkbox" /> 
  </label>
))

总体而言，您还可以通过应用一些条件渲染来简化组件代码。

export default class LetterOptions extends Component<LetterOptionsProps>{
  render() {
    const { letterOptions } = this.props;
    return letterOptions.length ? letterOptions.map((a:any, i:any) => (
      <label key={i}>
        {a}
        <input className="letter-option" type="checkbox" /> 
      </label>
    )) : null
  }
}