如何在reactjs中的特定div中渲染元素？

Question

我有一个下拉列表。

<ul>
  <li id="list_1">
    <select>
      <option>---</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </li>
  <li id="list_2">
    <select>
      <option>---</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
  </li>
</ul>

从下拉列表中选择选项。我使用绑定到它的 onClick 方法和 div呈现 span 元素元素如下所示。

<ul>
  <li id="list_1">
    <select>
     <option>---</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <span onClick={this.getDropdown}> (+) </span>
    <div></div>
  </li>
  <li id="list_2">
    <select>
      <option>---</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
    <span onClick={this.getDropdown}> (+) </span>
    <div></div>
  </li>
</ul>

  

结果1：   如果从第一个下拉列表中选择了值<1> 的选项，并且从 li元素中点击了（+），其中id =“list_1”。我必须得到如下所示的结果。

<ul>
  <li id="list_1">
    <select>
     <option>---</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <span onClick={this.getDropdown}> (+) </span>
    <div>
         <select>
            <option>---</option>
            <option>A</option>
            <option>B</option>
         </select>
    </div>
  </li>
  <li id="list_2">
    <select>
      <option>---</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
    <span onClick={this.getDropdown}> (+) </span>
    <div></div>
  </li>
</ul>

  

结果2：   如果从第二个下拉列表中选择了选项，其价值为5 ，则（+）会从 li元素中点击，ID =“list_2”。我必须得到如下所示的结果。

<ul>
  <li id="list_1">
    <select>
     <option>---</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <span onClick={this.getDropdown}> (+) </span>
    <div></div>
  </li>
  <li id="list_2">
    <select>
      <option>---</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
    <span onClick={this.getDropdown}> (+) </span>
    <div>
       <select>
          <option>---</option>
          <option>X</option>
          <option>Y</option>
          <option>Z</option>
       </select>
    </div>
  </li>
</ul>

  

注意： li ID值仅供参考。 li 元素没有 id 。

     

问题在于渲染组件时我们必须明确提及必须渲染的元素。与ReactDOM.render("<App/>",document.getElementById("container"))类似。这里显示下拉列表的<div>没有任何 id .So如果我向<div id="container"></div>添加了一个ID。下拉列表会被覆盖。

Answer 1

您可以从下拉列表中获取值，并根据它返回不同的视图，如：

render: function(){
  this.state.dropdown? return(//render with no dropdown) : return(//render with dropdown.)
}