Повторно обрабатывать компонент несколько раз в контейнере с различными реквизитами?

Question

Я пытаюсь создать повторно используемый компонент «tag» 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, так что если что-то не ясно, дайте мне знать :)

Edit: такой же пример внутри заранее существующей формы: 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') 
    ); 
    } 
})