Блог

Главная - Вопросы по программированию - Ошибка «Недопустимый тег» при renderToStaticMarkup

Ошибка «Недопустимый тег» при renderToStaticMarkup

#node.js #reactjs #jsx #babeljs #server-side-rendering

#node.js #reactjs #jsx #babeljs #рендеринг на стороне сервера

Вопрос:

Я новичок в reactjs..

Я пытаюсь отобразить компонент (jsx) с помощью renderToStaticMarkup, но я получаю следующую ошибку:

Ошибка:

 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>
        );
    }

Ответ №1:

React.createElement Принимает либо одну строку, которая может быть тегом HTML (div, li, пользовательский html-тег), либо a 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, используйте класс component для этого элемента HTML.
  • Если имя тега не является элементом HTML, предположим, что это имя локальной переменной, которое указывает на пользовательский класс компонента.
  • Атрибуты преобразуются в объект и передаются в качестве второго параметра.
  • Дочерние элементы передаются в качестве оставшихся параметров.

Извлечено из руководства по React JS и руководства по ошибкам.