Question

我正在构建我的第一个反应组件，并尝试通过外部点击事件将项目添加到父组件。用户基本上从搜索结果列表中选择，我希望这些进入反应组件。问题是，它似乎每次都会创建一个新组件吗？

var MatchApp = React.createClass({
  render: function() {
    return (
      <div id="tasks">Here</div>
    );
   }
});

var MatchList = React.createClass({
  render: function() {
    return (
      <a id={this.props.match}>Matching element</a>
    );
  }
});

document.getElementById("hits-container").addEventListener("click", function(e) {
  if( e.target.classList.contains('matching_link') ) {
    //get matching ID reference
    var $match = e.target.id.replace( /^\D+/g, '');

    //now send to react
    ReactDOM.render(<MatchList match={$match}/>, document.getElementById('tasks'));
  }
});

ReactDOM.render(<MatchApp/>, document.getElementById('example'));

我想要实现的目标。

//动态加载搜索结果。

<div id="hits-container">
<div class="hit">
<!-- User clicks link below to send to matching container ( MatchApp ) -->
    <a href="#" id="6574" class="matching_link"></a>
</div>

//匹配容器，我想构建一个包含＆＃34; hits＆＃34;的元素。来自用户上面点击的搜索结果。

<div id="example">
<div id="tasks">

<!-- Loaded from the above hit hopefully into the react component -->
<a href="http://somewhere.com" id="match_6574">Matching element</a>

</div> 
</div>

Answer 1

如果您尝试添加项目列表，则必须在某处跟踪它们。基本示例可能如下所示（codepen）

记下MatchApp如何获取列表，以及列出map的{{1}}。 jQuery处理程序只是将每个匹配推送到一个数组中，并将该数组提供给应用程序，以便它可以更新列表。

<ul>

将数据添加到react组件

1 个答案: