Question

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

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

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

如何添加自定义属性？

Answer 1

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

也可以以 data-amp-bind-property
的形式使用XML兼容的替代语法。

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

Answer 2

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

执行此操作后，React生成的HTML将包含它。

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

更新（AUG-25-2017）：

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

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

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

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

Answer 3

使用其他语法

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

代替

<tag [x]="foo">

带括号的自定义反应属性

3 个答案: