React onmouseover 在另一个 div 中获取内容答案

【问题标题】：React on mouseover get content in an other divReact onmouseover 在另一个 div 中获取内容
【发布时间】：2018-04-21 06:17:56
【问题描述】：

我有这种情况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>
 }
 }

【问题讨论】：

标签： javascript reactjs javascript-framework react-props

【解决方案1】：

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

见https://jsfiddle.net/nb59bxjk/

一些相关的sn-ps：

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);
    }
}

【讨论】：