Javascript 锚定标记（标记）onclick事件处理程序不工作

虽然我已经在reactjs组件（名为renderLocationLink的组件）的render方法返回的html中包含了a标记的onclick处理程序，但是虽然渲染正确，但onclick处理程序属性没有出现在网页上呈现的html中。我想知道问题出在哪里，这是密码

var feedApp = React.createClass({
      getInitialState: function(){
        return {
          data : [
           {display_name:"Rao",content:"this is Rao post",links:['link1','link2','link3']},
           {display_name:"Sultan",content:"this is Sultans",links:['link4','link5','link6']},
           {display_name:"John",content:"this is John post",links:['link7','link8','link9']}
          ]
        }
      },
      fetchFeedsFromUrl: function(){
        console.log('Onclick triggered');
      },
      render: function(){
        return (<Feeds data={this.state.data} onClick={this.fetchFeedsFromUrl} />)
      }
})

var Feeds = React.createClass({

    render: function(){
      var onClickfunc = this.props.onClick; 
      var feeds = this.props.data.map(function(feed){
        return (
          <oneFeed  name={feed.display_name}  onClick={this.onClickfunc} content={feed.content}  links={feed.links} />
        )
      });
    return( 
      <div> {feeds} </div>  
    )
  }
})


var oneFeed = React.createClass({
      render: function() {
        return (
         <div> 
          <h3>{this.props.name}</h3>
          <renderLocationLink  onClick={this.props.onClick}  linkArray={this.props.links}  />
          <p>{this.props.content} </p>
         </div> 
        )
      }
    });


var renderLocationLink = React.createClass({

  render: function(){
    var onClick = this.props.onClick;
    var locationLinks = this.props.linkArray.map(function(link,index){
        return (<a onClick={this.onClick} href={link}>{link}   </a>)
    })

   return ( <div >{locationLinks}</div> )

  }
})

React.renderComponent(feedApp(null),document.body); 

var feedApp=React.createClass({
getInitialState:函数（）{
返回{
数据：[
{显示名称：“Rao”，内容：“这是Rao帖子”，链接：['link1'，'link2'，'link3']}，
{显示名称：“苏丹”，内容：“这是苏丹”，链接：['link4'，'link5'，'link6']}，
{display_name:“John”，内容：“this is John post”，链接：['link7'，'link8'，'link9']}
]
}
},
fetchFeedsFromUrl:函数（）{
log（'Onclick-tricked'）；
},
render:function（）{
返回（）
}
})
var Feeds=React.createClass({
render:function（）{
var onClickfunc=this.props.onClick；
var feed=this.props.data.map（函数（feed）{
返回(
)
});
报税表（
{feed}
)
}
})
var oneFeed=React.createClass({
render:function（）{
返回(
{this.props.name}
{this.props.content}

)
}
});
var renderLocationLink=React.createClass({
render:function（）{
var onClick=this.props.onClick；
var locationLinks=this.props.linkArray.map（函数（链接，索引）{
返回（）
})
返回（{locationLinks}）
}
})
React.renderComponent（feedApp（null），document.body）；

访问局部变量不需要在映射函数中引用“this”。尝试访问onClick变量时，请删除“this”

var renderLocationLink = React.createClass({

  render: function(){
    var onClick = this.props.onClick;
    var locationLinks = this.props.linkArray.map(function(link,index){
        return (<a onClick={onClick} href={link}>{link}   </a>)
    })

   return ( <div >{locationLinks}</div> )

  }
})

var renderLocationLink=React.createClass({
render:function（）{
var onClick=this.props.onClick；
var locationLinks=this.props.linkArray.map（函数（链接，索引）{
返回（）
})
返回（{locationLinks}）
}
})

呈现的标记将不包含

onClick

属性。在JSX标记中编写的不是直接的HTML标记

---

相反，React将为您的标记提供一个

data-reactid

属性，并确保它自己的事件处理程序在单击特定的

data-reactid

时触发某些内容。

好的，因此我已经找到了错误的地方：

在许多组件中，您错误地使用了

此

。您在渲染函数中使用了

此

。因此，与其使用

{this.onClick}

您应该改用

{onClick}

看看这个例子，我们如何在返回的渲染中使用

{onClick}

（而不是

{this.onClick}

）

var Feeds = React.createClass({

    render: function(){
      var onClickfunc = this.props.onClick;
      var feeds = this.props.data.map(function(feed){
        return (
          <oneFeed  name={feed.display_name}  onClick={onClickfunc} content={feed.content}  links={feed.links} />
        )
      });
    return( 
      <div> {feeds} </div>  
    )
  }
})

var Feeds=React.createClass({
render:function（）{
var onClickfunc=this.props.onClick；
var feed=this.props.data.map（函数（feed）{
返回(
)
});
报税表（
{feed}
)
}
})

下面是一个正在工作的JSFIDLE：

---

PS：这正是所建议的。

问题在于呈现的标记中不存在

onClick

属性，或者处理程序似乎不起作用？@DanielApt，这两种情况都是真的，onClick不存在于呈现的标记中，并且它也不起作用……好的，它永远不会出现在呈现的标记中。您可能只是将属性向下传递到目前为止，而该属性从未到达预期的子组件。但是如何修复此代码，使其能够通过单击锚定标记来执行/调用函数？非常感谢Daniel:）