0

我是reactjs的新手..

我正在尝试使用 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)
    }

组件.jsx

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

1 回答 1

0

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 和 Guide to the Gotchas。

于 2016-10-06T23:25:45.583 回答