对鼠标悬停做出反应在另一个 div 中获取内容

Question

我有这种情况 https://jsfiddle.net/ffq1p77m/ 实际上将链接悬停在一个框上显示相关内容，但它显示在 UL 内的一个框中，我会将内容放在 ul 外的另一个 div , 有可能吗？

class Item extends React.Component {

constructor(props) {
super(props);

this.state = {
  isHovered: false,
};
}

handleEnter() {
this.setState({
  isHovered: true 
});
}

handleLeave() {
this.setState({
  isHovered: false 
});
}

render() {
return <div><li><a href="#" onMouseEnter={this.handleEnter.bind(this)}
      onMouseLeave={this.handleLeave.bind(this)}>
    { this.props.name }</a>
    { this.props.children }</li>{this.state.isHovered ? (
      <div className="box">{this.props.content}</div>
    ) : (
      <div />
    )}</div>
 }
 }

Answer 1

这是可能的，但您需要将工具提示状态向上移动到将显示它的组件..

见https://jsfiddle.net/nb59bxjk/

一些相关片段：

class List extends React.Component {
    constructor() {
        super();

        this.state = { tooltip: null };
        this.setTooltip = this.setTooltip.bind(this);
    }

    setTooltip(tooltip) {
        this.setState({ tooltip });
    }

    list(data) {
        //...
        return <Item setTooltip={this.setTooltip} key={ node.key } name={ node.label } content={node.content}>
    }
    //...
}

class Item extends React.Component {
    // ...
    handleEnter() {
        this.props.setTooltip(this.props.content);
    }
}

对鼠标悬停做出反应在另一个 div 中获取内容

React on mouseover get content in an other div

javascript

reactjs

javascript-framework

react-props