Question

我尝试创建一个React组件，我可以调用showMessage(message, bgColor)这样的函数，然后会弹出一个警告框，在5秒后会自动关闭。

我在我的应用程序中创建了许多React组件，但是这个组件因为必须调用alert()而导致我遇到麻烦，它并不总是存在，并且具有所需的计时器功能。我无法想到＆＃34; React＆＃34; ive设计组件的方式。

以下是我正在使用的当前jQuery代码，但我正试图摆脱：

$("#alertBox").css('background-color', color);
$("#alertBox").html(message);
$("#alertBox").alert();
$("#alertBox").fadeIn(500, "linear").fadeOut(5000, "linear", function() {
  $("#alertBox").alert('close');
});

问题是React基本上是声明性的，而且这个代码似乎非常必要。在我的代码库中的某些事件处理程序中，我希望能够只调用一个函数来暂时显示此警告框。如果它没有调用警报功能并且淡入/淡出它就不会那么糟糕（可能只是做条件加法器）。这是我的代码中的最后一个地方我还在使用jQuery，我试图从我的应用程序中完全中性。

我也不愿意使用react-bootstrap和react-motion，因为我几天前刚刚发现它们，这是我应用程序需要的最后一个React组件，而不是重写现在一切都使用这些库。

Answer 1

怎么样;

＆＃13;

<showMessage message={message} bgcolor={bgcolor} hide={hideMessage}/>

＆＃13;

然后在showMessage渲染;

＆＃13;

render() {
  if (this.props.hide) return null;
  if (this.state.timerDone) return null;
  return (<div id="messageDive" style={whatever}></div>);
}

＆＃13;

你可能需要在componentReceivedProps中重置timerDone并设置你的计时器。然后当然是timerDone方法到setState（{timerDone：true}）。

如何为引导程序警报创建React组件？

1 个答案: