javascript - 如何为 Bootstrap 警报创建 React 组件？

Question

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

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

这是我正在使用的当前 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 组件需要我的应用程序，而不是现在重写所有内容以使用这些库。

Answer 1

怎么样？

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

然后在showMessage中渲染；

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

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