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

我正在嘗試創建一個可重複使用的「標記」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元素裏面首先調用時更換「。這意味着當添加第二個芯片時，第一個被移除。我希望用戶能夠擁有多個芯片。

我該怎麼做？

來源

2016-01-20 Isaac Hinman

我不知道你是否有一個很好的理由不添加用於在你的組件上創建標籤的表單，但如果可以的話，它會簡單得多。然後，您只需將您的標籤添加到陣列上並使用您的LanguageChip組件顯示它們。

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

我不知道什麼是你的陣營的瞭解程度，所以如果事情是不明確讓我知道:)

編輯：的同樣的例子在一個先前存在的格式中： https://jsfiddle.net/snahedis/69z2wepo/28217/

來源

2016-01-20 11:30:01 Snahedis

謝謝，這太棒了！我不想通過一個表單來完成，因爲我使用的區域實際上已經在一個表單中，所以我得到了嵌套的表單問題。任何建議在表單外執行此操作？ –

我編輯了我的答案。您只需使用按鈕的單擊事件而不是表單的提交事件。但是，如果它是在一個窗體內，我想你會想提交標籤的形式不是？ – Snahedis

是的，我需要提交標籤，但通過JSON具有非常特殊的結構，所以不用擔心。謝謝！ –

您需要使用數組來存儲多個芯片數據。看看這個簡化的例子：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') 
    ); 
    } 
})

來源

2016-01-20 11:35:42

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

回答

相關問題