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')
    );
  }
})

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

2 个答案: