Reactjs ';react引导&x27;不包含名为';卡片';
我正在使用新的React引导程序v1构建React应用程序(React的引导程序3已更改为不再包含面板组件-现在已替换为卡组件)。我安装了npm安装,它是:npm安装react引导引导引导引导 但当我运行应用程序时,它告诉我:“react bootstrap”不包含名为“Card”的导出。下面是我的组件的外观:Reactjs ';react引导&x27;不包含名为';卡片';,reactjs,react-bootstrap,Reactjs,React Bootstrap,我正在使用新的React引导程序v1构建React应用程序(React的引导程序3已更改为不再包含面板组件-现在已替换为卡组件)。我安装了npm安装,它是:npm安装react引导引导引导引导 但当我运行应用程序时,它告诉我:“react bootstrap”不包含名为“Card”的导出。下面是我的组件的外观: import React, { Component } from 'react'; import mealsCall from '../DBRequests/mealCalls'; im
import React, { Component } from 'react';
import mealsCall from '../DBRequests/mealCalls';
import { Card, Button } from 'react-bootstrap';
export class Meals extends Component {
state = {
meals: [],
}
componentDidMount() {
mealsCall
.getMeals()
.then((meals) => {
this.setState({ meals })
})
.catch((error) => {
console.error('error with GET meals call', error);
});
};
render() {
const meals = this.state.meals.map((meal) => {
return (
<div key={meal.id}>
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>{meal.mealName}</Card.Title>
<Card.Text>
<h3>{meal.restaurantName}</h3>
<h4>{meal.city}, {meal.state}</h4>
</Card.Text>
<Button variant="primary">View Meal</Button>
</Card.Body>
</Card>
</div>
);
})
return (
<div>
{meals}
</div>
);
}
}
import React,{Component}来自'React';
从“../DBRequests/mealCalls”导入mealsCall;
从“react bootstrap”导入{Card,Button};
导出类组件{
状态={
膳食:[],
}
componentDidMount(){
米尔斯凯尔
.getfeeds()
.然后((膳食)=>{
this.setState({feeds})
})
.catch((错误)=>{
console.error('获取膳食调用出错',错误);
});
};
render(){
const-fines=this.state.fines.map((膳食)=>{
返回(
{MEAT.mealName}
{膳食.餐厅名称}
{MEIN.city},{MEIN.state}
观餐
);
})
返回(
{膳食}
);
}
}
来自react引导版本1.0.0-beta.x:
卡的正确导入语句为
import Card from "react-bootstrap/Card";
按钮的正确导入语句为
import Button from "react-bootstrap/Button";
你能分享你安装的
react bootstrap
版本吗?嘿@Malias17你正在运行哪个版本的react bootstrap?