Javascript 将引导4与React一起使用

对不起，我缺乏知识，但我是新来的，目前正在学习。我只是想问一下，如果我想在React应用程序中使用Bootstrap4，我需要安装jQuery吗？我在某个地方读到，将jQuery与React结合使用是不可能的。所以现在我想知道。谢谢你的回复。非常感谢您的建议。

您应该考虑使用react bootstrap。相反，您可以使用npm:$npm install--save react bootstrap安装它

请记住，它使用引导v3

---

快乐编码

某些功能，如下拉菜单、modal需要JS来操作DOM，bootstrap使用jQuery来处理DOM操作

但是，React使用，因此通过jQuery在React应用程序外部操纵浏览器DOM意味着React可能不再处理状态、事件和UI呈现。React广泛地期望/假设没有其他东西会修改DOM

---

这就是为什么建议使用或不建议使用的原因。CSS保持完全相同，但是最初需要jQuery的组件被重写

例如，您需要定义

模态

状态，该状态确定模态是显示还是隐藏

---

因此本质上，这些react引导库将每个引导组件重写为react组件，CSS方面完全相同。

更新2020-引导5

Bootstrap5不再需要jQuery，因此您可以像任何其他JS模块一样@import它，这使得它更容易与React一起使用。这也意味着您可以在没有第三方库（如reactstrap或ReactBootstrap）的情况下使用引导

此外，还可以导入零部件并直接引用它们。例如：

const popover = new Popover(document.querySelector('#myButton'), options)

这使得将引导5与React 16.8+

useEffect

和

useState

挂钩一起使用更加容易。为了避免React中直接的DOM操作，我们使用

useRef

hook获取元素实例

function PopoverDemo() {
  const popoverRef = useRef()
  useEffect(() => {
    var popover = new Popover(popoverRef.current, {
        content: "Hello popover content!",
        title: "My Popover",
        trigger: 'hover'
    })
  })

  return (
    <div className="py-2">
        <button className="btn btn-danger" ref={popoverRef}>
            Hover for popover
        </button>
    </div>
  )
}

函数PopoverDemo（）{
const popuverref=useRef（）
useffect（（）=>{
var popover=新popover（PopoOverRef.current{
内容：“你好，popover内容！”，
标题：“我的府绸”，
触发器：“悬停”
})
})
返回(
悬停等待爆米花
)
}

---

您确实需要jQuery来实现一些引导功能（如列表项选项卡等），但如果没有jQuery，应该可以。如果你确实想在React应用程序中实现引导的全部功能，请参阅。根据我目前阅读的内容，我试图避免将JQuery与React一起使用，因为这是一种不好的做法。但是在Bootstrap4中有一个主题我想用，所以我想知道JQuery是否对我来说是必要的，我想用这个主题。正如Jack所说，JQuery只用于一些与组件的交互，这样你就可以不必担心了。不过，您可以使用css部分，看看这个。Ps:

@import“~bootstrap”

似乎是bootstrap 4的JS部分的一个react端口。现在，react bootstrap（）支持bootstrap版本4，我们正在努力使它与bootstrap 4一起工作，并且可以在react bootstrap（）上进行跟踪。5@coder247谢谢你的提醒。这个答案是在react bootstrap仅支持bootstrap v3时编写的。我已相应地更新了我的答案。