Javascript 使用React多转盘进行React转盘
我正在尝试实现一个卡组件,该组件包含来自RESTAPI的数据。到目前为止,我的代码如下,但转盘似乎没有实现?你知道为什么吗Javascript 使用React多转盘进行React转盘,javascript,reactjs,react-multi-carousel,Javascript,Reactjs,React Multi Carousel,我正在尝试实现一个卡组件,该组件包含来自RESTAPI的数据。到目前为止,我的代码如下,但转盘似乎没有实现?你知道为什么吗 code.js import React, { Component } from 'react'; import './news.css'; import Carousel from "react-multi-carousel"; import "react-multi-carousel/lib/styles.css"; const responsive = {
code.js
import React, { Component } from 'react';
import './news.css';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 5,
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
};
class News extends Component {
state = {
loading: false,
data: [],
headline: []
}
componentDidMount() {
this.setState({ loading: true })
console.log('app mounted');
fetch('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=8ee8c21b20d24b37856fc3ab1e22a1e5')
.then(data => data.json())
.then(data => this.setState({ data: data.articles, loading: false }, () => console.log(data.articles)))
}
render() {
return (
<div className="about container">
<h1 className="text-left"><b>Latest News</b></h1>
{this.state.loading
? "loading..."
: <div>
{this.state.data.map((post, indx) => {
return (
<Carousel responsive={responsive}>
<div className="card text-left mt-5" key={indx}>
<img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"></img>
<div className="card-body">
<h5 className="card-title">{post.title}</h5>
<p className="card-text">{post.description}</p>
<a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
</div>
</div>
</Carousel>
)
})}
</div>
}
</div>
)
}
}
export default News;
import React,{Component}来自'React';
导入“/news.css”;
从“react multi Carousel”导入转盘;
导入“react multi carousel/lib/styles.css”;
常数响应={
超大桌面:{
断点:{max:4000,min:3000},
项目:5,
},
桌面:{
断点:{max:3000,min:1024},
项目:3,
},
平板电脑:{
断点:{max:1024,min:464},
项目:2,
},
流动电话:{
断点:{max:464,min:0},
项目:1,
},
};
类新闻扩展组件{
状态={
加载:false,
数据:[],
标题:[]
}
componentDidMount(){
this.setState({loading:true})
console.log('app-mounted');
取('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=8ee8c21b20d24b37856fc3ab1e22a1e5')
.then(data=>data.json())
.then(data=>this.setState({data:data.articles,load:false},()=>console.log(data.articles)))
}
render(){
返回(
最新消息
{this.state.loading
“装载…”
:
{this.state.data.map((post,indx)=>{
返回(
{post.title}
{post.description}
)
})}
}
)
}
}
导出默认消息;
问题在于您将旋转木马置于地图功能内部
{this.state.data.map((post, indx) => {
return (
**<Carousel responsive={responsive}>**
<div className="card text-left mt-5" key={indx}>
<img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"></img>
<div className="card-body">
<h5 className="card-title">{post.title}</h5>
<p className="card-text">{post.description}</p>
<a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
</div>
</div>
**</Carousel>**
)
})}
{this.state.data.map((post,indx)=>{
返回(
****
{post.title}
{post.description}
****
)
})}
另外,我认为你应该改变你的CSS文件。你的图像太大了。
试试这个:
{this.state.loading
? "loading..."
: <div>
<Carousel responsive={responsive}>
{this.state.data.map((post, indx) => {
return (
<div className="card text-left mt-5" key={indx}>
//<img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"></img>
<img style={{ height: '100px' }} src={post.urlToImage} alt="Alt text"></img>
<div className="card-body">
<h5 className="card-title">{post.title}</h5>
<p className="card-text">{post.description}</p>
<a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
</div>
</div>
)
})}
</Carousel>
</div>
}
{this.state.loading
“装载…”
:
{this.state.data.map((post,indx)=>{
返回(
//
{post.title}
{post.description}
)
})}
}
暂时你能用news.css重现这个问题吗。@亚历克斯,你能在这里帮我吗