ReactJSコンポーネントの子要素にid属性を適用する方法は？

Question

だから私は、ドロップダウンコンポーネントがあります。

import React from 'react'; 
import { PropTypes } from 'prop-types'; 

export default class Dropdown extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     value: this.props.selectedDropdownValue, 
    }; 

    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
    this.setState({ 
     value: e.target.value, 
    }); 

    this.props.onChange(e.target.value); 
    } 

    render() { 
    let disabled = false; 
    let dropdownOptions = null; 
    const { options } = this.props; 

    // Disable dropdown is the disabled attribute is added 
    if (options) { 
     dropdownOptions = this.props.options.map((option) => 
     <option value={option.key} key={option.key} >{option.display}</option>, 
    ); 
    } else { 
     // Setting default options 
     const defaultOptions = [ 
     { key: '', display: 'Please configure defaultOptions' }, 
     ]; 

     disabled = true; 

     dropdownOptions = defaultOptions.map((option) => 
     <option value={option.key} key={option.key} >{option.display}</option>, 
    ); 
    } 

    return (
     <select 
     value={this.state.value} 
     onChange={this.handleChange} 
     disabled={disabled} 
     > 
     { dropdownOptions } 
     </select> 
    ); 
    } 
} 

Dropdown.propTypes = { 
    options: PropTypes.arrayOf(PropTypes.object), 
    onChange: PropTypes.func, 
    selectedDropdownValue: PropTypes.string, 
}; 

Dropdown.defaultProps = { 
    options: undefined, 
    onChange: this.handleChange, 
    selectedDropdownValue: '', 
}; 

そして、ここでは、私が私の見解でドロップダウンをレンダリングしています方法です。ここで

import React from 'react'; 
import { PropTypes } from 'prop-types'; 
import Dropdown from 'components/Dropdown'; 

class Anish extends React.Component { 
    render() { 
    return (
     <div> 
     <div> 
      Value Selected: {this.props.selectedDropdownValue} 
     </div> 
     <label htmlFor={'dropdownId1'}>Sort by: </label> 
     <Dropdown 
      id="dropdownId1" 
      options={[ 
      { key: '', display: 'Please select a value' }, 
      { key: 'NJ', display: 'New Jersey' }, 
      { key: 'NY', display: 'New York' }, 
      ]} 
      onChange={this.props.onSetDropdownValue} 
     /> 
     </div> 
    ); 
    } 
} 

Anish.propTypes = { 
    selectedDropdownValue: PropTypes.string, 
    onSetDropdownValue: PropTypes.func.isRequired, 
}; 

Anish.defaultProps = { 
    selectedDropdownValue: '', 
}; 

export default Anish; 

は、ドロップダウンとラベルがブラウザに表示されている方法です。

だから私はに<Dropdown />上のIDを適用する方法その中の？

何か助けていただければ幸いです。

Answer 1

propsにはDropdownのIDが含まれますが、あなたはReactコンポーネント内にあるので、this.propsを使用しています。

return (
    <select 
    id={this.props.id} 
    value={this.state.value} 
    onChange={this.handleChange} 
    disabled={disabled} 
    > 
    {dropdownOptions} 
    </select> 
) 

Answer 2

if/elseと返品時にid = {option.id}を追加する必要があります。注：Anishクラスでは、id = "dropdownId1"を小道具として渡しています。それが意図されているかどうかはわかりません。

if (options) { 
    dropdownOptions = this.props.options.map((option) => 
    <option value={option.key} id={option.id} key={option.key} >{option.display}</option>, 
); 
} else { 
// Setting default options 
     const defaultOptions = [ 
     { key: '', display: 'Please configure defaultOptions' }, 
     ]; 

     disabled = true; 

     dropdownOptions = defaultOptions.map((option) => 
     <option id={option.id} value={option.key} key={option.key} >{option.display}</option>, 
    ); 
    } 
    return (
     <select 
     value={this.state.value} 
     onChange={this.handleChange} 
     disabled={disabled} 
     id={option.id} 
     > 
     { dropdownOptions } 
     </select> 
    ); 

//いけないpropTypes

id: React.PropTypes.string,