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

は、HTML タグ (div、li、カスタム html タグ) またはコンポーネントの単一の文字列のReact.createElementいずれかを受け入れます。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> ]
    )
  );

jsフィドル

ReactClassタイプの引数(ステートレス コンポーネントMyComponent) をメソッドに渡していることに注意してくださいrenderToStaticMarkup。

render()次のように、コンポーネントのメソッドで通常行うように、いくつかの JSX を引数として使用することもできます。

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

jsフィドル

JSX は (大まかに) この変換を行っていることに注意してください。

  • タグ名が HTML 要素にマップされる文字列である場合は、その HTML 要素のコンポーネント クラスを使用します。
  • タグ名が HTML 要素でない場合は、カスタム コンポーネント クラスを指すローカル変数名であると想定します。
  • 属性はオブジェクトに変換され、2 番目のパラメーターとして渡されます。
  • 子要素は、残りのパラメーターとして渡されます。

React JS チュートリアルとガッチャへのガイドから抽出。

于 2016-10-06T23:25:45.583 に答える