Question

我是反应灵的新手..

我正在尝试使用renderToStaticMarkup渲染组件（jsx），但我收到以下错误：

错误：

Invariant Violation: Invalid tag: <html data-reactroot="" data-reactid="1" data-re....

server.js（摘要）

var html = ReactDOMServer.renderToStaticMarkup(
            React.createElement(
            ReactDOMServer.renderToString(Component(props))
        ),
        script({dangerouslySetInnerHTML: {__html:
            'var APP_PROP = ' + safeStringify(props) + ';'
        }}),

      script({src: '//cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js'}),
      script({src: '//cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js'}),
      script({src: '/bundle.js'})

    )
        response.send(html)
    }

component.jsx

return(
        <html>
        <head></head>
        <body>
        <div>
            <ul>{values}</ul>
            <button onClick={this.handleClick}>Click Me!</button>
        </div>
        </body>
        </html>
        );
    }

Answer 1

React.createElement接受单个字符串，该字符串可以是HTML标记（div，li，自定义html标记）或组件的ReactClass。

所以你可以做以下

  // Declaring the component (a stateless component in this case)
  const MyComponent = ({ onClickHndlr, children }) => (
    <html>
      <head></head>
      <body>
        <div>
          <ul>{children}</ul>
          <button onClick={onClickHndlr}>Click Me!</button>
        </div>
      </body>
    </html>
  );

  // Declaring my click function handler that I'll 
  // be passing it as a prop to the React.createElement method.
  const onClickHndlr = () => {}

  ReactDOMServer.renderToStaticMarkup(
    React.createElement(
      MyComponent, 
      { 
        onClickHndlr: onClickHndlr 
      }, 
      [ <li>first children</li>, <li>second children</li> ]
    )
  );

jsFiddle

请注意，我已将类型ReactClass（无状态组件MyComponent）的参数传递给renderToStaticMarkup方法。

您也可以使用一些JSX作为参数，就像通常在组件的render()方法中一样，如下所示：

ReactDOMServer.renderToStaticMarkup(
  <MyComponent onClickHndlr={onClickHndlr}>
    <li>first children</li>
    <li>second children</li>
  </MyComponent>
);

jsFiddle

请记住，JSX（大致）正在进行此转换：


如果标记名称是映射到HTML元素的字符串，请使用该HTML元素的组件类。

如果标记名称不是HTML元素，则假定它是指向自定义组件类的本地变量名称。

属性转换为对象并作为第二个参数传递。

子元素作为剩余参数传递。

摘自React JS Tutorial and Guide to the Gotchas。

错误＆＃34;标签无效＆＃34;在renderToStaticMarkup上

1 个答案: