gpt4 book ai didi

javascript - ReactJS html渲染为字符串而不是html

转载 作者:行者123 更新时间:2023-12-03 00:53:44 25 4
gpt4 key购买 nike

尝试渲染 html,但我得到了字符串

var ref = firebase.database().ref('raffle/');
ref.on('value', (snapshot) => {
var content = ``;
var IDwrapper = document.getElementById('raffleFeed');

snapshot.forEach((data) => {
// var rImage = data.val().raffleImage;
var rTitle = data.val().raffleTitle;
var rAmount = data.val().raffleAmount;
var rDescription = data.val().raffleDescription;
var rEntries = data.val().raffleEntries;
var rButton = '<button class="btn btn-secondary"> Button </button>';

console.log(data.val());
// content += '<Row>';
content += '<Col sm="4">';
content += '<CardBody>';

content += '<CardTitle>' + rTitle + '</CardTitle>';
content += '<CardText>' + rAmount + '</CardText>';
content += '<CardText>' + rEntries + '</CardText>';
content += '<CardText>' + rDescription + '</CardText>';
content += rButton;

content += '</CardBody>';
content += '</Col>';
// content += '</Row>'; //end
});

IDwrapper.append(content);

渲染如下

<Col sm="4"><CardBody><CardTitle>1</CardTitle><CardText>1</CardText><CardText>1</CardText><CardText>1</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col><Col sm="4"><CardBody><CardTitle>2</CardTitle><CardText>2</CardText><CardText>2</CardText><CardText>2</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col><Col sm="4"><CardBody><CardTitle>3</CardTitle><CardText>3</CardText><CardText>3</CardText><CardText>3</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col><Col sm="4"><CardBody><CardTitle>4</CardTitle><CardText>4</CardText><CardText>4</CardText><CardText>4</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col><Col sm="4"><CardBody><CardTitle>5</CardTitle><CardText>5</CardText><CardText>5</CardText><CardText>5</CardText><button class="btn btn-secondary"> Button </button></CardBody></Col>

不知道我忽略了什么,但这让我发疯。感谢您的帮助

最佳答案

您可以将 JSX 推送到 array 中,或使用 React Fragment,或者在最坏的情况下,使用 dangerouslySetInnerHtml

这是一个使用混合数组内容的简单示例(字符串加上JSX): https://codesandbox.io/s/1v1xmq1kmq

与上面的示例相同,但不使用数组,而是将内容包装在 Fragment 中: https://codesandbox.io/s/92r12m7zp

这是一个使用分块数组的更复杂的示例(将更改为可均匀划分为 24 的数字):https://codesandbox.io/s/30v7qvoz3m

使用数组的示例:

const content = [];

snapshot.forEach((data) => {
const rTitle = data.val().raffleTitle;
const rAmount = data.val().raffleAmount;
const rDescription = data.val().raffleDescription;
const rEntries = data.val().raffleEntries;
const rButton = <button class="btn btn-secondary"> Button </button>

const jsxContent = (
<Row key={rTitle}>
<Col sm="4">
<CardBody>
<CardTitle> { rTitle }</CardTitle>
...etc
<CardBody>
</Col>
</Row>
)

content.push(jsxContent);
});

然后在你的 React 组件中:

<div>
{content}
</div>
<小时/>

通常数据库会存储抽奖券数据的 JSON 数组,如下所示:

[ 
{
id: xxxx-xxxx-xxxx-xxx (unique uuid),
title: "Example Raffle Title",
amount: 10.00,
description: "Example raffle description",
entries: 49,
maxEntries: 500
},
{
id: xxxx-xxxx-xxxx-xxx,
title: "Example Raffle Title 2",
...etc
},
{
...etc
}
]

然后,您将从数据库中检索此 JSON 数组,映射该数组,显示每个项目,并将唯一的 id 应用于元素的 onClick 处理程序(单击其中一张票以检索 id,然后可用于向客户收费、更新数据库条目,...等)。

工作示例:https://codesandbox.io/s/8446420yn2

关于javascript - ReactJS html渲染为字符串而不是html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52940939/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com