javascript - React props.children 怎么绑定事件
本文介绍了javascript - React props.children 怎么绑定事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
Image组件
import React, { Component, PropTypes } from 'react';
import ContextMenu from './ContextMenu';
class Image extends Component {
render() {
return (
<div>
<ContextMenu>
<div className="uploader"></div>
</ContextMenu>
</div>
);
}
}
export default Image;
ContextMenu组件
import React, { Component, PropTypes } from 'react';
class ContextMenu extends Component {
handleContextMenu(event) {
event.preventDefault();
console.log(event);
}
render() {
return (
<div>
{
React.Children.map(this.props.children, (child) => {
return (
<child
onContextMenu={this.handleContextMenu}
/>
)
})
}
</div>
);
}
}
export default ContextMenu;
渲染出来的是:
<div><child></child></div>
用这种方式实现走不通,并没有把child解析出来而是返回了标签,还有其他办法可以实现绑定props.children的事件么?
测试地址:http://codepen.io/sanonz/pen/LZNBrg/
解决方案
1 <child /> 是html标签。React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签 http://reactjs.cn/react/docs/jsx-in-depth.html
2 this.props.children 有可能是一个单独的组件,也可能是组件集合 http://reactjs.cn/react/tips/children-props-type.html
3 答案 http://codepen.io/anon/pen/KMzEKw?editors=0011
这篇关于javascript - React props.children 怎么绑定事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文