如何为引导警报创建 React 组件？答案

【问题标题】：How to create a React component for a bootstrap alert?如何为引导警报创建 React 组件？
【发布时间】：2016-02-24 06:04:45
【问题描述】：

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

我在我的应用程序中创建了许多 React 组件，但这个组件给我带来了麻烦，因为必须调用 alert()，它并不总是存在，并且具有所需的计时器功能。我只是想不出一种“反应式”设计组件的方式。

这是我正在使用的当前 jQuery 代码，但我正在尝试摆脱：

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

问题在于 React 从根本上说是声明性的，而这段代码看起来非常必要。在我的代码库中的某些事件处理程序中，我希望能够只调用一个函数来暂时显示此警报框。如果不是因为调用警报功能和淡入/淡出它就不会那么糟糕（只能做有条件的redner）。这是我的代码中的最后一个地方，我仍在使用 jQuery，我正试图从我的应用程序中完全中性化。

我也不想使用react-bootstrap 和react-motion，因为我几天前才发现它们，这是我的应用程序需要的最后一个 React 组件，而不是现在重写所有内容以使用这些库.

【问题讨论】：

标签： javascript jquery twitter-bootstrap reactjs

【解决方案1】：

怎么样？

&lt;showMessage message={message} bgcolor={bgcolor} hide={hideMessage}/&gt;

然后在 showMessage 中渲染；

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

您可能需要在 componentReceivedProps 中设置一些东西来重置 timerDone 并设置您的计时器。然后当然 timerDone 方法设置为 setState({timerDone: true})。

【讨论】：

这个看起来不错，但是有没有办法模拟jQuery提供的淡入淡出效果？
查看 ReactCSSTransitionGroup。