使用不同道具在容器中多次响应渲染组件

React render component multiple times in container with different props?

本文关键字：响应 组件      更新时间：2023-09-26

我正在尝试创建一个可重用的"标签"React组件，以便用户可以在单击时创建标签并查看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>
    );
  }
});

和点击呼叫： 

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 元素都会被替换。这意味着当添加第二个芯片时，第一个芯片被移除。我希望用户能够拥有多个芯片。

我该怎么做？

我不知道

您是否有充分的理由不添加用于在组件上创建标签的表单，但如果可以的话，它会简单得多。然后，您只需要在数组上添加标签，并使用LanguageChip组件显示它们。

我在这里举了一个例子：https://jsfiddle.net/snahedis/69z2wepo/28193/

我不知道你对 React 的理解程度如何，所以如果有什么不清楚的地方，请告诉我:)

编辑：预先存在的表单中的相同示例：https://jsfiddle.net/snahedis/69z2wepo/28217/

您需要使用数组来存储多个芯片数据。看看这个简化的例子：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')
    );
  }
})
相关文章：