React 0.12.2: "Error: Lower case component names (paper-button) are no longer supported in JSX"

Question

我正在尝试在 React 组件中使用 Web 组件 (paper-icon-button)，但出现以下错误：

Error: Lower case component names (paper-button) are no longer supported in JSX" error: See http://fb.me/react-jsx-lower-case

从 React 0.12 开始，所有小写的标签名称都被解释为 DOM 元素与 React 组件，所以这应该有效：

<paper-icon-button className="red" icon="favorite"></paper-icon-button>

但是，我注意到 /node_modules/react/dist/JSXTransformer.js 和 /node_modules/react-tools/vendor/fbtransform/transforms/react.js 的当前版本仍然包含以下条件：

// Identifiers with lower case or hypthens are fallback tags (strings).
  // XJSMemberExpressions are not.
  if (nameObject.type === Syntax.XJSIdentifier && isTagName(nameObject.name)) {
    // This is a temporary error message to assist upgrades
    if (!FALLBACK_TAGS.hasOwnProperty(nameObject.name)) {
      throw new Error(
        'Lower case component names (' + nameObject.name + ') are no longer ' +
        'supported in JSX: See http://fb.me/react-jsx-lower-case'
      );
    }

此评论 // This is a temporary error message to assist upgrades 似乎表明这只是一条信息性消息，但它破坏了我的应用程序的 Grunt 工作流程。如何将自定义 elements/web 组件与 react@^0.12 一起使用？

我的项目：

当运行我的 grunt-browerify 任务使用 options: { transform: [require('grunt-react').browserify] } 选项时，我收到错误。这就是我的 package.json:

...
"grunt-browserify": "^3.3.0",
"grunt-react": "^0.10.0",
"react": "^0.12.2",
"node-jsx": "^0.12.4"
...

Answer 1

这应该在 React.js 0.13.0-alpha.1 或更高版本中修复，因为 this 已合并。升级到 0.13 应该会删除警告。

React 0.12.2: "Error: Lower case component names (paper-button) are no longer supported in JSX"

React 0.12.2: "Error: Lower case component names (paper-button) are no longer supported in JSX"

polymer

reactjs

web-component

custom-element