React props.children 怎么绑定事件

Question

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/

Answer 1

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

Answer 2

用这个React.cloneElement()