Question

我想在没有包装HTML标记的情况下将事件onMouseEnter添加到组件道具。

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

是否可以将此事件添加到this.props.children，因为我无法承担包装范围。

以下是所有组件代码：

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

如果我理解正确，您可以映射组件的子项并使用事件处理程序返回一个新元素。这样的事情会让你走上正轨吗？

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

React：将事件侦听器添加到没有包装器html标记的props

1 个答案: