在具有不同道具的容器中多次反應渲染組件？

Question

我試圖創建一個可重用的“標簽” React組件，以便用戶可以在onclick上創建標簽，並查看DOM中顯示的信息。

這是模塊：

module.exports = React.createClass({
  render: function() {
    return (
      <div className="language chip" data-lang={this.props.language} data-lang-level={this.props.level}>
        {this.props.language} ({this.props.level})
        <i className="material-icons">close</i>
      </div>
    );
  }
});

和onclick調用：

var addLanguage = $('a#add-language');
addLanguage.click(function() {
  var languageLearning = $('#language-learning');
  var levelLearning =  $('#language-level');

  if (languageLearning != null && levelLearning != null) {

    ReactDOM.render(
      <LanguageChip
        language={languageLearning.val()}
        level={levelLearning.val()}
      />,
      document.getElementById('language-chips')
    );

    languageLearning.select2('val', '');
    levelLearning.select2('val', '');

  }
})

我沒有意識到使用React.DOM時，“第一次調用時，內部的任何現有DOM元素都會被替換。” 這意味着在添加第二個芯片時，第一個被移除。 我希望用戶能夠擁有多個芯片。

我怎樣才能做到這一點？

Answer 1

我不知道您是否有充分的理由不在組件上添加用於創建標簽的表單，但是如果可以的話，它會簡單得多。 然后，您只需要在數組上添加標簽，然后將其與LanguageChip組件一起顯示即可。

我在這里做了一個例子： https ： //jsfiddle.net/snahedis/69z2wepo/28193/

我不知道您對React的理解水平，所以如果不清楚，請告訴我:)

編輯：先前存在的表單中的相同示例： https : //jsfiddle.net/snahedis/69z2wepo/28217/

Answer 2

您需要使用數組來存儲多個芯片數據。 看一下這個簡化的示例： http : //output.jsbin.com/seficu

var LanguageChips = React.createClass({
  render: function() {
    return (
      <div>
        {    
          (this.props.chipsArray).map(function(chip, index) {
            return <LanguageChip
              key={index}
              language={chip.languageLearning}
              level={chip.levelLearning}
            />
          })
        }
      </div>
    );
  }
});

var LanguageChip = React.createClass({
  render: function() {
    return (
      <div className="language chip" data-lang={this.props.language} data-lang-level={this.props.level}>
        {this.props.language} ({this.props.level})
        <i className="material-icons"></i>
      </div>
    );
  }
});

var chipsArray = [];

document.getElementById('add-language').addEventListener("click", function() {
  var languageLearning = 'test1';
  var levelLearning = 'test2';
  if (languageLearning != null && levelLearning != null) {
    chipsArray.push({
      languageLearning: languageLearning,
      levelLearning: levelLearning
    });

    ReactDOM.render(
      <LanguageChips chipsArray={chipsArray} />,
      document.getElementById('language-chips')
    );
  }
})