反应：将事件侦听器添加到没有包装html标签的道具

Question

I would like to add Event onMouseEnter to component prop without wrapper HTML tag.

var tooltipText = this.props.children;
<span onMouseEnter={this.renderTooltip}>{tooltipText}</span>

Is it possible add this event to this.props.children , because I can't afford on the wrapper span.

Here is all component code:

class FastTooltip extends Component{
    constructor(props){
        super(props);
        this.renderTooltip = this.renderTooltip.bind(this);
        this.state = {
            tooltip: false,
        }; 
    }
    renderTooltip(){
        this.setState({ tooltip: true });
    }
    render(){
        var renderTooltip;
        var { overlay, placement } = this.props;
        var tooltipText = this.props.children;

        if( this.state.tooltip ){
            renderTooltip = <OverlayTrigger placement={placement} overlay={<Tooltip>{overlay}</Tooltip>}>
                                {tooltipText}
                            </OverlayTrigger>
        } else {
            renderTooltip = <span onMouseEnter={this.renderTooltip}>{tooltipText}</span>
        }

        return renderTooltip;

    }
}

Answer 1

If I understand correctly, you could map your component's children and return a new element with an event handler. Does something like this get you on the right track?

class FastTooltip extends Component {
    render() {
        return React.Children.map(this.props.children, (child) => {
            return React.cloneElement(child, {
                onMouseEnter: () => { console.log('onMouseEnter'); }
            })
        });
    }
}