reactjs - 如何在 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>

从下拉列表中选择选项。我呈现一个span元素，其中绑定(bind)了一个onClick方法和一个div 元素如下所示。

<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>

Result 1: if option with value 1 was selected from the first dropdown and (+) is clicked from li element with id="list_1".I must get the result as shown below.

<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>

Result 2: if option with value 5 was selected from the second dropdown and (+) is clicked from li element with id="list_2".I must get the result as shown below.

<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>

NOTE: li id values were added only for reference.li elements have no id's.

The problem is when rendering components we have to explicitly mention were the elements have to be rendered.Like ReactDOM.render("<App/>",document.getElementById("container")) .Here the <div> in which the dropdown is rendered doesn't have any id.So If I add an id to the <div id="container"></div>.The dropdown is overwritten.

Answer 1

您可以从下拉列表中获取值，并根据它返回不同的 View ，例如:

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