Question

是否可以在JS对象上保存标记以便稍后检索？

为什么？

这就是我的问题，如果描述太长，我希望能够将它分成单独的块，可能是不同的HTML标签，而不是将整个文本放在一个长链词中

ie：循环通过对象...

 <div>{markup.description}</div>

上面会给我所有的描述数据，但我无法按摩它（分为粗体，斜体，标题或跨度）以获得更好的UI。

所以我在这里学习的最终结果是如何产生类似的东西：

const markup = [
       {
         name: "<h1>Joe Doe<h1/>",
         food: "<p>pizza<p/>",
         description: "<h1>super long description<h2><p>bla bla 
         bla</p>"   
       }
    ]

我尝试过模板文字，但没有骰子。

我知道我可以通过在对象中添加更多键来分隔文本块，但这感觉多余，因为它只是一个描述，除此之外我仍然无法为单词应用任何样式（添加类）需要注意的是文本中间。

Answer 1

我猜你总是可以使属性功能化。

const markup = [{
  name: () => "<h1>Joe Doe<h1/>",
  food: () => "<p>pizza<p/>",
  description: () => "<h1>super long description<h2><p>bla bla bla</p>"
}]

function renderMarkup(item) {
  let markup = ''
  Object.entries(item).forEach(([key, value]) => {
    markup += value()
  });
  return markup
}

$('.markup').html(renderMarkup(markup[0]))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="markup"></div>

Answer 2

如果您正在使用React并且可以使用JSX，则可以将JSX片段存储在变量中，然后在渲染时引用它们。但是，您撰写的标记非常不正确。您的斜杠的结束标记位置错误，并且h1与h2匹配。 JSX标记必须有效，并且每个片段必须包含在包含整个片段的标记中。

This works：

const markup = [
  {
    name: <h1>Joe Doe</h1>,
    food: <p>pizza</p>,
    description: <div><h1>super long description</h1><p>bla bla bla</p></div>
  },
  {
    name: <h1>Janet Doe</h1>,
    food: <p>chicken</p>,
    description: <div><h1>yet another super long description</h1><p>bla bla bla</p></div>
  }
];

const App = () => (
  <div>
    { markup.map(r => [r.name, r.food, r.description]) }
  </div>
);

将JS对象的值保存为Markup

2 个答案: