#javascript #reactjs #hyperlink
#javascript #reactjs #гиперссылка
Вопрос:
У меня есть объект, который я использую для хранения данных, которые я хочу получить на своем сайте, и я хотел бы добавить ссылку внутри значения. Пример —
s3: {
title: "Title",
description: "I want to describe a website and provide a link in here",
},
Я хочу, чтобы «здесь» было ссылкой.
Я пробовал использовать метод link() —
const linkName = "Here"
const link = linkName.link("http://www.google.com")
description: "I want to describe a website and provide a" link "in here",
но это просто показывает буквальный HTML после того, как я просматриваю объект и отображаю его, а не фактическую ссылку.
* Редактировать — я использую React для отображения данных. Пример —
Object.keys(object).map(function (key) {
return <Card
title={object[key].title}
description={object[key].description}
/>;
});
Комментарии:
1. Как вы генерируете HTML из этого объекта?
2. Как вы пытаетесь отобразить ссылку?
3. И как вы вставляете описание на страницу? Безусловно, можно использовать html в строках, если вы вставляете их как html, а не текст
4. Я использую React, я отредактирую свой пост с кодом, так как он длинный
5. Принимает ли описание <Card> html?
'My link is: <a href="http://...">Click me</a>'
?
Ответ №1:
в этом вообще нет ничего особенного…
s3: {
title: "Title",
description: "I want to describe a website and provide a link in here",
}
//any "link" is just a string that represents a url... thus just store it as a property=>String like so.
s3.link = "putYourUrlHere";
//or another way is in the declartion of the object literal.
s3: {
title: "Title",
description: "I want to describe a website and provide a link in here",
link: "putYourUrlHere";
}
//but then you have to generate html from an object.
//so maybe something like this?
s3: {
title: "Title",
descript1: "I want to describe a website and provide ",
descript2: " in here",
link: "putYourUrlHere";
}
const div = document.createElement('div');
const a = document.createElement('a');
a.setAttribute('src', s3.link);
const p1 = document.createElement('p');
const p2 = document.createElement('p');
p1.innerHTML = s3.descript1;
p2.innerHTML = s3.descript2;
div.appendChild(p1);
div.appendChild(a);
div.appendChild(p2);
//that's if you want it in the middle, or a specific part of the description.
редактировать: исправлена ошибка конкатенации
Комментарии:
1. Вы не можете объединить строку и элемент.
2. исправлено. небольшая ошибка с моей стороны. основная идея все та же.