#javascript #html #css #reactjs
#javascript #HTML #css #reactjs
Вопрос:
Я пытаюсь создать страницу часто задаваемых вопросов, и у меня есть следующие три файла:
App.js
import React, { useState } from 'react';
import Header from './Header';
import FAQ from './FAQ';
function App () {
const [faqs, setfaqs] = useState([
{
id: 1,
question: 'This is question 1?',
answer: 'This is answer 1',
open: false
},
{
id: 2,
question: 'This is question 2?',
answer: 'This is answer 2',
open: false
},
{
id: 3,
question: 'This is question 3?',
answer: 'This is answer 3',
image: 'Question3.png',
open: false
},
{
id: 4,
question: 'This is question 4?',
answer: 'This is answer 4',
open: false
}
]);
const toggleFAQ = index => {
setfaqs(faqs.map((faq, i) => {
if (i === index) {
faq.open = !faq.open
} else {
faq.open = false;
}
return faq;
}))
}
return (
<div className="App">
<Header />
<div className="faqs">
{faqs.map((faq, i) => (
<FAQ faq={faq} index={i} key={faq.id} toggleFAQ={toggleFAQ} />
))}
</div>
</div>
);
}
export default App;
FAQ.js
import React from 'react'
function FAQ ({faq, index, toggleFAQ}) {
// console.log(faq.hasOwnProperty('url'));
if(faq.hasOwnProperty('url') amp;amp; faq.hasOwnProperty('image')){
console.log("Hello URL");
return (
<div
className={"faq " (faq.open ? 'open' : '')}
key={faq.id}
onClick={() => toggleFAQ(index)}
>
<div>
<div className="faq-question">
{faq.question}
</div>
<div className="faq-answer">
{faq.answer}
<div className="faq-url">
<a href={faq.url}>Link to URL</a>
</div>
<div className="faq-image">
<img src={`/src/media/${faq.image}`} alt="Image for FAQ"/>
</div>
</div>
</div>
</div>
)
}
else {
console.log("No url");
return (
<div
className={"faq " (faq.open ? 'open' : '')}
key={faq.id}
onClick={() => toggleFAQ(index)}
>
<div>
<div className="faq-question">
{faq.question}
</div>
<div className="faq-answer">
{faq.answer}
</div>
</div>
</div>
)
}
}
export default FAQ;
Index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgb(255, 255, 255);
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
header {
display: flex;
justify-content: center;
align-content: center;
padding: 5px;
background-color:#4caf50;
border-bottom: 3px solid #3c3c3c;
}
header h1 {
color: rgb(26, 25, 25);
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
}
.faqs {
width: 100%;
max-width: 768px;
margin: 0 auto;
padding: 15px;
}
.faqs .faq {
margin: 20px;
padding: 15px;
background-color:#f5f5f5 ;
border: 2px solid black;
border-radius: 8px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.faqs .faq:hover {
background-color: #f0ebeb;
}
.faqs .faq .faq-question {
position: relative;
font-size: 20px;
padding-right: 80px;
transition: all 0.4s ease;
}
.faqs .faq .faq-question::after {
content: '2B9B';
position: absolute;
color: black;
top: 50%;
right: 0px;
transform: translateY(-50%);
margin-top: 10px;
width: 50px;
height: 50px;
transition: all 0.4s ease-out;
}
.faqs .faq .faq-answer {
opacity: 0;
max-height: 0;
overflow-y: hidden;
transition: all 0.4s ease-out;
}
.faqs .faq.open .faq-question {
margin-bottom: 15px;
}
.faqs .faq.open .faq-question::after {
/* transform: translateY(-70%) rotate(180deg); */
content: "2B99";
}
.faqs .faq.open .faq-answer {
max-height: 1000px;
opacity: 1;
}
Структура каталогов всех страниц выглядит следующим образом:
App.js состоит из состояния объектов, содержащих различные вопросы и ответы для страницы часто задаваемых вопросов. Также он состоит из FAQToggle, который проверяет, открыт ли аккордеон или нет, и закрывает аккордеон, если он открыт, и наоборот.
FAQ.js Строка: 24 (актуальная проблема, с которой я сталкиваюсь): я пытаюсь добавить изображение, чтобы ответ 3 мог содержать изображение. Но все, что я вижу, это сломанный значок изображения. Кто-нибудь может помочь мне в отладке этого?
Комментарии:
1. Я думаю, вам может потребоваться импортировать изображение в файл js и использовать его в качестве переменной. Поместите имя изображения в свой массив состояний и укажите на него свой тег img src.
Ответ №1:
Я думаю, что вы можете использовать фотографии в своих компонентах только в том случае, если вы импортируете, тогда сначала дайте мне знать, если я ошибаюсь. https://create-react-app.dev/docs/adding-images-fonts-and-files /
В этом сообщении говорится, что вам «нужно» сначала импортировать их: https://www.edwardbeazer.com/importing-images-with-react /
Вот еще один: https://daveceddia.com/react-image-tag /
Цитата — «Распространенной ошибкой для начинающих является установка src в путь к файлу на своем компьютере, например /Users/yourname/Projects/this-react-app/src/image.png . Это не сработает «.
Цитата — «В наши дни браузеры в основном изолированы и не позволяют вам получать доступ к файлам по их пути на диске. Если бы вы заставили это работать (возможно, с file:// ), это сломалось бы, как только вы развернули приложение, потому что на веб-сервере не будет этого файла в том же месте! (И нет, решение не в том, чтобы поместить его в одно и то же место на сервере »
import React, { useState } from 'react';
import Header from './Header';
import FAQ from './FAQ';
import Question3 from "./media/Question3.png" //import img here
function App () {
const [faqs, setfaqs] = useState([
{
id: 1,
question: 'This is question 1?',
answer: 'This is answer 1',
open: false
},
{
id: 2,
question: 'This is question 2?',
answer: 'This is answer 2',
open: false
},
{
id: 3,
question: 'This is question 3?',
answer: 'This is answer 3',
image: Question3, // use it as a variable
open: false
},
{
id: 4,
question: 'This is question 4?',
answer: 'This is answer 4',
open: false
}
]);
const toggleFAQ = index => {
setfaqs(faqs.map((faq, i) => {
if (i === index) {
faq.open = !faq.open
} else {
faq.open = false;
}
return faq;
}))
}
return (
<div className="App">
<Header />
<div className="faqs">
{faqs.map((faq, i) => (
<FAQ faq={faq} index={i} key={faq.id} toggleFAQ={toggleFAQ} />
))}
</div>
</div>
);
}
export default App;
if(faq.hasOwnProperty('url') amp;amp; faq.hasOwnProperty('image')){
console.log("Hello URL");
return (
<div
className={"faq " (faq.open ? 'open' : '')}
key={faq.id}
onClick={() => toggleFAQ(index)}
>
<div>
<div className="faq-question">
{faq.question}
</div>
<div className="faq-answer">
{faq.answer}
<div className="faq-url">
<a href={faq.url}>Link to URL</a>
</div>
<div className="faq-image">
<img src={faq.image} alt="Image for FAQ"/> //target it here
</div>
</div>
</div>
</div>
Комментарии:
1. Я попытался импортировать изображение в
FAQ.js
файл, но у меня это не совсем сработало. Но решение, которое вы предоставили, решило мою проблему, с которой я столкнулся.. Большое спасибо, это сработало как шарм … 🙂