Question

我学习了带有引导程序的课程，并且要实践它，我想在ReactJS中使用它。该应用程序非常小，只是一种实践，而不是真正的项目。

我猜我做错了，因为在屏幕上看不到4列。这就是我得到的

所以我创建了一个React应用 npx create-react-app my-app 然后我安装了引导程序并使用它。

npm install --save bootstrap

在index.js中

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import './index.css';
import App from './App';



import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

我有App.js

import React, { Component } from 'react';
import './App.css';

import CardList from './componets/card-lists/card-list';

class App extends Component {
  state = {
    cards: []
  }
  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then(users => this.setState({ cards: users }))
      .catch((error) => {
        console.log('Fetch users error ', error)
      })
  }

  render() {
    return (
      <div className="App">
        {this.state.cards.map((card) => {
          return <CardList card={card} key={card.id} />
        })}
      </div>
    )
  }
}

export default App;

然后从这里将道具传递给card-list.js组件。

const cardList = ({ card }) => {
  return (
    <div>
      <div className="container">
        <div className="row">
          <div className="col-sm-4 col-md-4 col-lg-4 card-list">
            <button className="btn btn-danger">click</button>
            <h1>{card.name}</h1>
            <p>{card.email}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default cardList;

在CSS中，我只有几行内容：

.card-list {
  background-color: yellow;
  border: 1px solid red;
  margin: 10px;
}

有人请告诉我，我在做什么错了？

Answer 1

您需要将具有类容器和行的div移动到App.js。

App.js

  render() {
    return (
      <div className="App">
        <div className="container">
          <div className="row">
            {this.state.cards.map(card => {
              return <CardList card={card} key={card.id} />;
            })}
          </div>
        </div>
      </div>
    );
  }

卡片清单

const cardList = ({ card }) => {
  return (
    <div>
      <div className="col-sm-4 col-md-4 col-lg-4 card-list">
        <button className="btn btn-danger">click</button>
        <h1>{card.name}</h1>
        <p>{card.email}</p>
      </div>
    </div>
  );
};

另外，请不要因为Bootstrap网格系统使用12列，而在className中使用4列，所以您有12/4 = 3列，如果要拥有4列，则需要在组件中使用3，例如{ {1}}

Bootstrap在ReactJS应用程序中无法正常工作

1 个答案: