Question

在npm init并安装了react，react-dom，bootstrap和react-bootstrap软件包之后，我无法从react-bootstrap库中导入任何组件，因为import Button from 'react-bootstrap/Button';会产生TypeError: Error resolving module specifier: react-bootstrap/Button 。

我通过将路径更改为import Button from './node_modules/react-bootstrap/Button'来消除该错误-这是正确的路径，但是当我尝试呈现任何内容时，它不会更改目标.php文件中的div ，控制台中没有任何错误，所以我输了。我使用Babel babel-cli@6 babel-preset-react-app@3预处理程序进行JSX转换。

这是经过预处理的index.js：

import Button from 'react-bootstrap/Button'


class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <p>blah blah blah blah blah</p>
      </div>
    );
  }
}

ReactDOM.render(<ProfilePage/>, document.getElementById('app'))

和index.php：

<!DOCTYPE html>

<html lang="en">


<head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link
   rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
   integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous"
 />

 <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

</head>


<body>


  <div id="app">inner html
  </div>


  <script
    src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
    crossorigin
  />
  <script>var Alert = ReactBootstrap.Alert;</script>

  <script type="module" src="./index.js"></script> <!-- processed index.js --> 

</body >

输出为：inner html。没有react-bootstrap导入，它可以完美地工作，也可以进行引导，但是我当然不能使用react-bootstrap组件。我想念什么？

Answer 1

我认为您的导入语法即将结束。代替

Table1

尝试

import Button from 'react-bootstrap/Button'

或

import { Button } from 'react-bootstrap’

如果上述方法不起作用。

导入react-bootstrap库后，任何组件都不会呈现

1 个答案: