在next js的元描述中添加三元操作符

Question

我试图添加元描述这是动态的我试图使用三元运算符这里我做错了什么

<meta name="description" content={ itm.htmlsummery ? ( dangerouslySetInnerHTML={{ __html: itm.htmlsummery }}):({itm.Summary})} />

我试图添加元描述，这是动态的，我试图在这里使用三元操作符，我在这里做错了什么如果有htmlsummery，那么我想显示htmlsummery，否则我想显示Summary

htmlsummery是存储在数据库与html标签，所以为了删除这些标签，我使用dangerouslySetInnerHTML={{ __html: itm.htmlsummery }}

Answer 1

您在这里做错的是在属性中呈现HTML。传递给content的值应该是文本(字符串)，而不是HTML。

✅
<meta name="description" content={condition ? "text 1" : "text 2"} />

❌
<meta name="description" content={condition ? <p>text 1</p> : <p>text 2</p>} />

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML adding_an_author_and_description

和dangerouslySetInnerHTML不删除标签…它将字符串转换为HTML并输出(呈现它)。如果你想将let content = "<p>value from db</p>"转换为content = "value form db"，那么你需要使用自定义函数来操作字符串;dangerouslySetInnerHTML不用于此。