如何使反应加载引导类，className =“”

Question

我在我的机器上安装了带有 npm 的 bootstrap 和 create-react-app。然后我用第一个组件 counter.jsx 创建了一个新的 react-app：

import React, { Component } from 'react';
 class Counter extends Component {    
  state = {    
    name: test    
  };   
render() {  
 return ( 
  <div>
    <span> className="badge badge-primary">{this.state.name)}</span>    
    <button>Increment</button>    
  </div>
 );
}

export default Counter;

我在我的网站上获得 className="badge badge-primary">test 而不是徽章 我在渲染组件的 index.js 中导入了 bootstrap css 和组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';

ReactDOM.render(
 <React.StrictMode>
  <Counter />
 </React.StrictMode>,
 document.getElementById('root')
);

我搜索了这个问题并尝试配置我的 webpack.config.js。这并没有真正帮助，但我不确定我是否做出了正确的改变。有没有人遇到过同样的问题？

Answer 1

你的span标签有错字（你关闭它2次）

替换：
<span> className="badge badge-primary">

作者：
<span className="badge badge-primary">

---

此外，您正在关闭之前未打开的 this.state.name 之后的 )，请确保您想要它。

替换：
{this.state.name)}

作者：
{this.state.name}

---

更新

好的，所以你还有其他问题，这里有一个包含所有修复的最终版本：https://codesandbox.io/s/magical-sun-qtwep?file=/src/App.js:0-306

我改变了什么：

• 您忘记了最后的 } 以关闭您的组件（在关闭您的 render() 函数之后）
• test 变量不存在，所以我将name:test 替换为name:'test'

现在一切正常 =]