[英]React-Slick is not work on first rendering in React
I am trying to add React-Slick
in application but somehow I am failed actually I am adding todo in applicaiton and then showing todos list in slider.我正在尝试在应用程序中添加
React-Slick
,但不知何故我失败了,实际上我在应用程序中添加了待办事项,然后在 slider 中显示待办事项列表。 when I store some todo then I am fetching data from server and showing it in slider on first attempt it now showing but when I do try again then it showing.当我存储一些待办事项时,我正在从服务器获取数据并在第一次尝试时将其显示在 slider 中,但当我再次尝试时,它会显示。 I will share my code could you please check and rectify my issue.
我将分享我的代码,请您检查并纠正我的问题。
Code代码
let settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
className: "slides",
adaptiveHeight: true
};
<Slider {...settings}>
{this.props.fetchTodos
? this.props.fetchTodos.rows.map(item => (
<div
className={`${
item.priority === "P1"
? "red-data"
: item.priority === "P2"
? "yello-data"
: item.priority === "P3"
? "green-data"
: ""
} mb-4 `}
>
<div>{item.title}</div>
<div>{item.description}</div>
<div className="mt-2">
<TodoListModal
color={`${
item.priority === "P1"
? "light"
: item.priority === "P2"
? "light"
: item.priority === "P3"
? "light"
: ""
}`}
title={item.title}
description={item.description}
priority={item.priority}
todoId={item.id}
/>
</div>
</div>
))
: ""}
</Slider>
I have set up a code sandbox .我已经建立了一个代码沙箱。
react-slick
works on the first render. react-slick
适用于第一次渲染。 You will only see console output rendering..
for once.您只会看到控制台 output
rendering..
一次。
App应用程序
import "./styles.css";
import TodoListModal from "./TodoListModal";
class App extends Component {
state = {
settings: {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
className: "slides",
adaptiveHeight: true
}
};
render() {
const { settings } = this.state;
console.log("rendering..");
return (
<Slider {...settings}>
{this.props.fetchTodos
? this.props.fetchTodos.rows.map(item => (
<div
className={`${
item.priority === "P1"
? "red-data"
: item.priority === "P2"
? "yello-data"
: item.priority === "P3"
? "green-data"
: ""
} mb-4 `}
>
<div>{item.title}</div>
<div>{item.description}</div>
<div className="mt-2">
<TodoListModal
color={`${
item.priority === "P1"
? "light"
: item.priority === "P2"
? "light"
: item.priority === "P3"
? "light"
: ""
}`}
title={item.title}
description={item.description}
priority={item.priority}
todoId={item.id}
/>
</div>
</div>
))
: ""}
</Slider>
);
}
}
App.defaultProps = {
fetchTodos: {
rows: [
{
id: "01",
priority: "P1",
title: "title P1",
description: "description P1"
},
{
id: "02",
priority: "P2",
title: "title P2",
description: "description P2"
},
{
id: "03",
priority: "P3",
title: "title P3",
description: "description P3"
}
]
}
};
TodoListModal待办事项列表模式
const TodoListModal = ({ color, title, description, priority, todoId }) => {
return (
<div
style={{
background: "#bbc",
border: "5px solid purple",
margin: "10px",
padding: "10px"
}}
>
<h2>color: {color}</h2>
<h4>title: {title}</h4>
<h4>description: {description}</h4>
<h4>priority: {priority}</h4>
<h4>todoId: {todoId}</h4>
</div>
);
};
Styles.css Styles.css
Slider > div {
background: #bbc;
width: 400px;
height: 150px;
}
.red-data {
background: red;
}
.yello-data {
background: yellow;
}
.green-data {
background: green;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.