Question

尝试呈现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);

以下内容已呈现

1 1 1 1 <按钮 class =“ btn btn-secondary”>按钮 2 2 2 2 <按钮 class =“ btn btn-secondary”>按钮 3 3 3 3 4 4 4 4 <按钮 class =“ btn btn-secondary”>按钮 5 5 5 5

不知道我在忽略什么，但它使我发疯。谢谢你的帮助

Answer 1

您可以将JSX放入array，或使用React Fragment，或者在最坏的情况下，使用dangerouslySetInnerHtml。

这是一个使用混合数组内容（string加上JSX）的简单示例： https://codesandbox.io/s/1v1xmq1kmq

与上述相同，但是，不使用数组，而是将内容包装在Fragment中： https://codesandbox.io/s/92r12m7zp

这是一个使用分块数组的更复杂的示例（将columns更改为一个平均分为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的票证，然后可以使用该票证向客户收费，更新数据库entries等。

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

Answer 2

<table class="order-items"> <thead> <tr> <th class="product"><?php /* translators: woocommerce */ _e( 'Product', 'woocommerce' ); ?></th> <th class="qty"><?php _ex( 'Qty', 'Abbreviation of Quantity', 'woocommerce-pos' ); ?></th> <th class="price"><?php /* translators: woocommerce */ _e( 'Price', 'woocommerce' ); ?></th> </tr> </thead> <tbody> {{#each line_items}} <tr> <td class="product"> {{name}} [*I WOULD LIKE THE COUPON CODE DISPLAYED HERE*] {{#with meta}} <dl class="meta"> {{#each []}} <dt>{{label}}:</dt> <dd>{{value}}</dd> {{/each}} </dl> {{/with}} </td>只是一个字符串，但是您需要一个content。

如果可以的话，您可以尝试

node

Answer 3

创建一个对象var cardValues = {}并将各种snapshot值分配给该对象，例如cardValues.title = snapshot.val().title。然后，将此对象传递到使用document.createElement和.appendChild方法渲染卡片的卡片生成器函数。

reactjs将html呈现为字符串而不是html

3 个答案: