Question

我正在使用React，需要呈现具有非标准属性的元标记。

<meta name="some-name" key="some-key" values="some,values">

由于key属性在React中很特殊，因此React不会将其传播给子对象，也不会渲染它。我该如何解决？我知道React会将任何未知属性传递给HTML标签，但是我不能使用data-key（例如），我需要专门呈现key属性。

我正在使用React Helmet，并且无法控制head元素，因此我不能这样做

<head dangerouslySetInnerHTML={{__html: '<meta key="value">'}}></head>

我也不能使用React refs，因为我是在服务器端（和客户端）渲染它的，并且无法访问组件生命周期或引用DOM元素。

编辑：我修改了原始答案以排除对Typescript的任何引用，因为问题是关于React而不是Typescript的。

Answer 1

尝试一下，对我有用：

const someMeta = {
    "data-one": "one",
    "data-two": 2
};

<div {...someMeta} >text</div>

例如，如果您需要key作为服务器渲染的响应，则可以尝试dangerouslySetInnerHTML https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

我的例子：

https://codepen.io/anon/pen/ebVzZm

Answer 2

您可以使用以下代码实现此目的，在您的doctype声明中，可以添加

lst = list()


def foo(xs):
    if len(xs) <= 0:
        return
    if f(xs[0]) > 0:
        lst.append(xs[0])
    foo(xs[1:])


# call foo with xs

在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [ <!ATTLIST tag myAttri CDATA #IMPLIED> ]>是您的属性的地方，可以将其命名为myAttri以匹配您想要的属性。

key表示它是可选的。如果您希望在每个元素上使用它，则可以使用#IMPLIED

您也可以尝试通过js通过

设置属性

#REQUIRED

在React中将键渲染为html属性

2 个答案: