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

我正在尝试创建一个可重复使用的“标记”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

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

回答

相关问题