React / Hypernova - пропущенные обработчики событий - PullRequest
Новая
       3

React / Hypernova - пропущенные обработчики событий

0 голосов
/ 07 июня 2018

Я использую React и hypernova (с php-привязками ) для выполнения рендеринга на стороне сервера некоторых компонентов React.Ниже приведен мой следующий тестовый компонент и ответ от гиперновой.

Test.js 

import React from 'react';
import { renderReact } from 'hypernova-react';

class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p onClick={() => alert('hey')}>click me</p>
    );
  }
}

export default renderReact('Test', Test);

ответ гиперновой 

WF\Hypernova\JobResult Object
(
    [error] => 
    [html] => 
        <div data-hypernova-key="Test" data-hypernova-id="e5af0b95-2a31-4ce4-8e36-808605fd4115">
            <p data-reactroot="">click me</p>
        </div>
        <script type="application/json" data-hypernova-key="Test" data-hypernova-id="e5af0b95-2a31-4ce4-8e36-808605fd4115">
            <!--{"prop1":"a","prop2":"b"}-->
        </script>
    [success] => 1
    ...
)

Как показано выше, props в настоящее времяуспешно пройден, но обработчик onClick нигде не найден.Тем не менее, он определенно существует в переданном коде.

bundle.js 

// code before and after class omitted for brevity
var Test = function (_React$Component) {
  _inherits(Test, _React$Component);

  function Test(props) {
    _classCallCheck(this, Test);

    return _possibleConstructorReturn(this, (Test.__proto__ || Object.getPrototypeOf(Test)).call(this, props));
  }

  _createClass(Test, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'p',
        { onClick: function onClick() {
            return alert('hey');
          } },
        'click me'
      );
    }
  }]);

  return Test;
}(_react2.default.Component);

exports.default = (0, _hypernovaReact.renderReact)('Test', Test);

Единственное, что мне удалось найти по этой проблеме, было в проблеме githubтрекер , в котором кто-то жалуется на то же самое, но, видимо, не должно быть обработчика событий для тега <p>;он должен существовать в коде, предоставляемом React.Я также попытался назначить обработчик щелчка, используя свойство класса с / без обозначения стрелки (явно обязательным в конструкторе в последнем случае).Я добавил тег <script> в свой React-код, но это не имеет значения.

Это ошибка или я что-то не так делаю?

1 Ответ

0 голосов
/ 08 июня 2018

Оказывается, что при использовании рендеринга на стороне сервера компонент должен отображаться как на сервере, так и на клиенте.В моем случае для этого потребовалось создать две отдельные конфигурации веб-пакетов: одну для сервера гиперновой и одну для клиентского кода React.Затем мне нужно было добавить код типа 

if (typeof document !== 'undefined') {
  ReactDOM.render(<Test />, document.getElementById('puzzle'));
}

в родительские компоненты, чтобы React отображал их на клиенте, а не генерировал исключения на сервере.

Я понял это из этот вопрос .

...