Компонент с возможностью повторного использования с изображением без ID

Question

Я пытаюсь сделать компонент Reactable React для флажка.

Теперь я знаю, что стандартное изображение, замена флажка выглядит, так вот она в моем 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, я хочу, чтобы иметь возможность повторно использовать этот компонент. Но я не могу повторно использовать идентификатор. Что делать, чтобы установить флажок с заменой образа на свой собственный? Есть ли способ сделать это без этого метода «метки»? Я бы предпочел не использовать случайное число в качестве идентификатора или что-то в этом направлении.

Answer 1

Передайте идентификатор в качестве опоры для компонента при его создании.

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

в компоненте (обратите внимание for в JSX является 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}