Semantic UI + React Dropdownコンポーネントにlabel要素を挿入する方法は？

Question

私は<label>がUI Reactを使用して、ドロップダウンメニューのために挿入されたセマンティックUIから以下のドロップダウンを再現したいと思います：

（https://semantic-ui.com/collections/form.html#dropdown）

これは私が私が反応たい値下げです作成するアプリケーション：

<div class="ui form"> 
    <div class="field"> 
     <label>Gender</label> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
       <div class="item" data-value="1">Male</div> 
       <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
    </div> 
</div> 

私はセマンティックUIのReact UI実装でこれを達成するのに苦労しています。それは、これが明確に表示されていることが非常に重要です

<Dropdown placeholder='What grade is your child in?' fluid selection 
       options={ grades } 
       labeled={ true } 
       name={ `survey_response[grade_${this.state.id}]` } /> 

：

私の現在の試みはこれです。私は、ユーザーリサーチで、プレースホルダが質問のプロンプトだけを混乱させていることを発見しました。

ラベルを追加するにはdocumentationがありますが、ドロップダウンコンポーネントの下に子コンポーネントを入れ子にする必要があります。これが私の "options" propの使用を妨害します。以下のようにエラーがある：

警告：失敗した小道具のタイプ：options、selection：小道具とchildrenDropdownで競合 プロップ。彼らはどちらか一方

を選択 、一緒に定義することができない、StackOverflowのをありがとう！

Answer 1

あなたが行うことができますFormの内側にそれを使用している場合：

<Form> 
    <Form.Dropdown 
    label='Gender' 
    options={//your array of options} 
    selection 
    /> 
</Form>