IDを持たないイメージの再利用可能な反応チェックボックスコンポーネント

Question

私はチェックボックスのために再利用可能なReactコンポーネントを作成しようとしています。

import React, { Component } from 'react'; 

class Checkbox extends Component { 
    render() { 
    return (
     <div className="checkbox"> 
     <input type="checkbox" name="thing" value="valuable" id="thing"/><label for="thing"></label> {this.props.text} 
     </div> 
    ); 
    } 
} 

export default Checkbox; 

をそしてここで、一般的なCSSです：今

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label { 
    background: url("checked.png") no-repeat; 
    background-size: 100%; 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    padding: 0; 
} 
input[type=checkbox]:checked + label { 
    background: url("unchecked.png") no-repeat; 
    background-size: 100%; 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    padding: 0; 
} 

は今、私はここに、それは私のリアクトプロジェクト内にある、チェックボックスのための標準的な画像の交換はどのようなものかを知っていますこれはReactであるため、このコンポーネントを再利用できるようにしたいと考えています。しかし、IDを再利用することはできません。ネイティブのチェックボックスを置き換える画像でチェックボックスを作るにはどうすればよいですか？この "ラベル"メソッドなしでこれを行う方法はありますか？ 私は、乱数をIDとして使うのではなく、それらの行に沿って何かを使うのが好きです。

Answer 1

インスタンスをインスタンス化するときに、idをコンポーネントの小道具として渡します。

コンポーネントで

<Checkbox id="whatever" value={state.valueOrWhatever} text="Change The Value!" />

（JSXでforがhtmlForであることに注意）：私の知る限り

<input type="checkbox" name={this.props.id} value={this.props.value} id={this.props.id} /> <label htmlFor={this.props.id}></label> {this.props.text}