传递道具和条件的简便有效方法

Question

在此代码中，每当我在按钮上悬停时，我都会尝试更改按钮的文本，但是问题是我必须编写很多效率不高的代码。

<div className="Launcher_Actions_visible Launcher_buttons_primary" 
     onMouseEnter={this.onMouseoverRemove}
     onMouseLeave={this.onMouseoutRemove}>
       {this.state.removeHover ? "Remove" : "Task name"}
</div>
<div className="Launcher_Actions_visible Launcher_buttons_primary"
     onMouseEnter={this.onMouseoverRemove}
     onMouseLeave={this.onMouseoutRemove}>
       {this.state.removeHover ? "Remove" : "New TeamSync"}
</div>

类似地，我在这些道具和条件上还添加了一些其他按钮。而且，在字符串“ Remove”之前，我想添加一个图标。所以我有点困惑如何做。寻找简化的书写方式。

成功执行任务后引发的问题是：

如果初始文本大小较大，则悬停状态会随着状态不断变化而开始闪烁。

https://codesandbox.io/s/funny-swirles-wzsmj

您将很容易理解代码。

我有点困惑如何使用ref来获取初始宽度并将其设置为悬停状态，而且如果有人可以给我一个解决方案，让我根据文本大小保持按钮大小，不会闪烁（更改状态）。

Answer 1

最好的方法是通过CSS处理此类情况，在这种情况下，您可以向已悬停和删除的文本添加过渡

<div className="Launcher_Actions_visible Launcher_buttons_primary">
    <span className="normalText">Remove</span>
    <span className="hoverText">Task name</span>
</div>
<div className="Launcher_Actions_visible Launcher_buttons_primary">
    <span className="normalText">Remove</span>
    <span className="hoverText">New TeamSync</span>
</div>

和scss应该是

.Launcher_Actions_visible.Launcher_buttons_primary {
    .normalText {
       display: block;
    }
    .hoverText {
       display: none;
    }
    &:hover {
       .normalText {
          display: none;
       }
       .hoverText {
          display: block;
       }
    }
}

Answer 2

我认为这可能有效？

state = {
   mouseEnter: false
}

onMousenterHover() {
    /* if mouseEnter is false then set to true */
    return !this.state.mouseEnter ? this.setState({mouseEnter: true}) : null
}

onMouseleaveHover() {
    /* if mouseEnter is true then set to false */
    return this.state.mouseEnter === true ? this.setState({mouseEnter: false}) : null
}

return <div>
    <div className="Launcher_Actions_visible Launcher_buttons_primary"
        onMouseEnter={() => this.onMousenterHover()}
        onMouseLeave={() => this.onMouseleaveHover()}>
        {this.state.mouseEnter ? "Remove" : "New TeamSync"}
    </div>
</div>