Я хочу, чтобы карта реагировала, используя базу данных в реальном времени json
Я использую firebase и реагирую, в моей базе данных в реальном времени есть такие элементы:
items
--> i1
--> --> img: "google-logo.jpg"
--> --> title: "google"
--> --> subtitle: "go to google"
--> --> url: "https://google.com"
--> i2
--> --> img: "facebook-logo.jpg"
--> --> title: "facebook"
--> --> subtitle: "go to facebook"
--> --> url: "https://facebook.com"
--> i3
--> --> img: "jpg3"
--> --> title: "twitter"
--> --> subtitle: "go to twitter"
--> --> url: "https://twitter.com"
const [posts, setPosts] = useState([])
useEffect(() => {
axios
.get("https://~~~firebase url~~~/items.json")
.then(response => setPosts(response.data));
}, [])
return (
<div className = "App">
<header className = "App-header">
<p>
{JSON.stringify(posts)}
</p>
</header>
</div>
);
}
export default App;
Я могу получить json из firebase и показать его в браузере, я хочу сделать многоразовые карты с img, title. И если пользователь нажмет на эту карту, он отправит пользователя на этот URL-адрес.
Есть ли хороший способ сделать компоненты карты, используя этот JSON?
Ответы 2
Перед вашим функциональным компонентом создайте компонент карты следующим образом:
const Card = (props) => (
<div className = "card">
<a href = {props.data.url}><h5 className = "card-header">{props.data.title}</h5></a>
<div className = "card-body">
<h4 className = "card-title"></h4>
<p className = "card-text">
</p>
</div >
</div >
)
Затем внутри вашего функционального компонента создайте одну функцию для отправки данных через реквизит:
cardData() {
return posts.map((info, i) => {
return <Card data = {info} key = {i} />;
})
}
Затем внутри вашего <div className = "App"> везде, где вы хотите установить элементы своей карты, напишите {cardData()}.
Вы можете настроить карты в соответствии с вашими требованиями, просто взгляните на загрузочные карты.
у меня ошибка
Поскольку я новый участник, я не могу комментировать сообщение ниже, поэтому я отвечаю здесь. Взгляните на загрузочные карты по этой ссылке: getbootstrap.com/docs/5.0/components/card Вы можете выбрать разные карты в соответствии с вашими требованиями. Вы также можете использовать карты реакции: reactstrap.github.io/components/card
@lsr Теперь ты можешь.
да все работает спасибо большое
Есть ли хороший пример оформления этих карт??
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const Card = (props) => {
return (
<div className = "card">
<a href = {props.data.url}><h5 className = "card-header">{props.data.title}</h5></a>
<img className = "image" src = {props.data.img} alt = "alt message"></img>
<div className = "card-body">
<h4 className = "card-title">{props.data.title}</h4>
</div>
</div>
)
}
function cardData(posts) {
var values = Object.values(posts);
return values.map((info, idx) => {
return <Card data = {info} key = {idx} />;
})
}
function App() {
const [posts, setPosts] = useState([])
useEffect(() => {
axios
.get("https://~~~~~~~~~`/items.json")
.then(response => setPosts(response.data));
}, [])
return (
<div className = "App">
{JSON.stringify(posts)}
{cardData(posts)}
</div>
);
}
export default App;
1. Ваш код неполный. 2. Можете ли вы также поделиться JSON?