Question

我是react.js的新手。我下载了一个主题，其中包含外部JavaScript库，即bootstrap.min.js，jquery.min.js，slider.js，jquery-flexslider.min.js。

我使用create-react-app创建了一个React应用程序，我将所有外部JavaScript库和CSS文件复制到我的react应用程序的公共文件夹的index.html中并复制了index.html的所有html我下载的app.js中的主题。所有的CSS都运行正常，但JavaScript库不能在页面上运行。

以下是我如何在公共文件夹的index.html中包含css文件和javascript库的演示。

<script src="/assets/javascript/jquery.min.js"></script>
<script src="/assets/javascript/bootstrap.min.js"></script> 
<script src="/assets/javascript/jquery.easing.js"></script>    
<script src="/assets/javascript/jquery-waypoints.js"></script>

<link rel="stylesheet" type="text/css"href="/assets/stylesheets/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/style.css"/>
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/responsive.css"/>`

现在我的问题是，我应该如何包含JavaScript库以便它开始工作。我试图将所有文件放在我的反应应用程序的src文件夹中，但它仍无效。

Answer 1

您应该考虑使用react-bootstrap代替jquery和缩小的引导程序文件。通过使用react-bootstrap，您可以获得引导程序3（4正在工作中）作为设计精美的反应组件，您可以选择性地导入和使用它们。那么你可以

import React from 'react'
import{ string } from 'prop-types'
import { Col, Row, Label } from 'react-bootstrap'

const PrettyThing = ({ thing }) => (
  <Row>
    <Col xs={9} xsOffset={1}>
      <Label bsStyle="success">{thing}</Label>
    </Col>
  </Row>
)

PrettyThing.propTypes = { thing: string.isRequired }

export default PrettyThing

和webpack将处理所有切片和切块的方式，以便只需要构建所需的CSS。

请参阅https://react-bootstrap.github.io/getting-started/introduction/了解详情。

在使用create-react-app配置的新反应应用程序中包含外部JavaScript库

1 个答案: