如何在Reactjs中实现引导程序模式[关闭]

Question

关闭。这个问题需要更多focused。它当前不接受答案。

---

是否要改善此问题？更新问题，使其仅按editing this post专注于一个问题。

关闭10分钟前。

我在reactjs中是一个新手，需要实现一个引导模式，我尝试了但没有用。

const onUpload = async (event) => {
    if(fileUpload.length > 10){
      alert(`Please upload only 10 images at a time`);
      return false;
    }
}

代替警报，我需要实现一个模式。

 const onUpload = async (event) => {
    if(fileUpload.length > 10){
      // implement modal pop up here
      return false;
    }
}

请帮助我谢谢

Answer 1

有些React Bootstrap模态组件您可以使用：

React Bootstrap Modal

Answer 2

如果您像我一样熟悉标准的Bootstrap，建议您使用此方法。在终端运行：

npm install bootstrap
npm install jquery@~3.4.1
npm install popper.js

现在在App.js中，在顶部添加以下几行：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'
import 'jquery'
import 'popper.js'

通过设置这些依赖项，您可以像在常规HTML中一样在JSX中使用常规Bootstrap。