2

在这个答案中，它解释了如何使用未记录的is功能将自定义属性添加到 React 元素。但是，我想添加一个与amp-bind一起使用的属性，该属性用方括号括起来。当我尝试这个时，没有添加属性：

const ampProps = {
  '[class]': 'foo.bar',
};

return <div is {...ampProps}><MyComponent></div>

如何添加自定义属性？

4

3 回答 3

2

对于带有 react 的 AMP 绑定，您可以使用amp-bind官方文档中提到的替代语法。

另一种与 XML 兼容的语法也可以以data-amp-bind-property的形式使用

You can write [text] binding as data-amp-bind-text在 React 中不会出错的示例。

于 2019-11-21T07:46:21.950 回答
1

您可能需要设置 React 以使用 ReactInjection 接受许多 AMP 指令。

完成后，React 生成的 HTML 将包含它。

import { DOMProperty } from 'react-dom/lib/ReactInjection'
DOMProperty.injectDOMPropertyConfig({
    Properties: {
        '[class]': DOMProperty.MUST_USE_PROPERTY
    }
})

更新（2017 年 8 月 25 日）：

上面的代码解决了常规 HTML 标签（如 div、ul、span 等）的情况。

我目前在将[src]属性放置在自定义amp-list中时遇到问题。React 代码不会为自定义标签考虑注入的 DOM 属性，该代码认为以 '[' 开头的属性不是“安全的”，并将其从 'amp-list' 中删除，无论注入DOMPropertyConfig 的设置如何。

有一个 React 16 的 RFC 可以解决这个问题：https ://github.com/facebook/react/issues/10399

我还提出了一个问题： https ://github.com/facebook/react/pull/10385

于 2017-08-11T17:31:57.370 回答
0

使用替代语法

<tag data-amp-bind-x="foo">

代替

<tag [x]="foo">
于 2019-12-03T09:27:42.313 回答