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

【问题标题】：How to render elements inside a particular div in reactjs?如何在reactjs中渲染特定div内的元素？
【发布时间】：2016-02-07 00:57:53
【问题描述】：

我有一个呈现的下拉列表。

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

在从下拉列表中选择 option 时。我渲染了一个 span 元素，其中绑定了一个 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>

结果 1： 如果从第一个下拉列表中选择了 值为 1 的选项，并且从 id="list_1" 的 li 元素中单击了 (+)。我必须得到如下所示的结果。

<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 的选项，并且从 id="list_2" 的 li 元素中单击了 (+)。我必须得到如下所示的结果。

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

问题是在渲染组件时我们必须明确提到必须渲染元素。像ReactDOM.render("<App/>",document.getElementById("container")) 。这里渲染下拉列表的<div> 没有任何id.所以如果我向<div id="container"></div>.添加一个id。下拉列表将被覆盖。

【问题讨论】：

那么，您的代码中究竟哪一部分有效，哪一部分无效？您希望包含select 元素的div 在用户按(+) 时每次呈现？生成的select 中的值是否始终为A 和B？你需要更好地解释。
@Chris 问题是在渲染组件时我们必须明确提到是否必须渲染元素。就像ReactDOM.render("<App/>",document.getElementById("container")) 。这里渲染下拉列表的<div> 没有任何id。所以如果我在 <div id="container"></div>.The 下拉列表中添加一个 id

标签： reactjs

【解决方案1】：

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

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

【讨论】：