Обработчик onClick не регистрируется в ReactDOMServer.renderToString

Я пытаюсь скопировать эту скрипку: http://jsfiddle.net/jhudson8/135oo6f8/

(Я также попробовал этот пример http://codepen.io/adamaoc/pen/wBGGQv и тот же onClick проблема с обработчиком существует)

и заставить скрипку работать для рендеринга на стороне сервера, используя ReactDOMServer.renderToString

У меня есть этот звонок:

   res.send(ReactDOMServer.renderToString((
            <html>
            <head>

                <link href={'/styles/style-accordion.css'} rel={'stylesheet'} type={'text/css'}></link>

            </head>

            <body>


            <Accordion selected='2'>
                <AccordionSection title='Section 1' id='1'>
                    Section 1 content
                </AccordionSection>
                <AccordionSection title='Section 2' id='2'>
                    Section 2 content
                </AccordionSection>
                <AccordionSection title='Section 3' id='3'>
                    Section 3 content
                </AccordionSection>
            </Accordion>
            </body>
            </html>
        )));

элемент Accordion выглядит так:

const React = require('react');

const fs = require('fs');
const path = require('path');


const Accordion = React.createClass({

    getInitialState: function () {
        // we should also listen for property changes and reset the state
        // but we aren't for this demo
        return {
            // initialize state with the selected section if provided
            selected: this.props.selected
        };
    },

    render: function () {

        // enhance the section contents so we can track clicks and show sections
        const children = React.Children.map(this.props.children, this.enhanceSection);

        return (
            <div className='accordion'>
                {children}
            </div>
        );
    },

    // return a cloned Section object with click tracking and 'active' awareness
    enhanceSection: function (child) {

        const selectedId = this.state.selected;
        const id = child.props.id;

        return React.cloneElement(child, {
            key: id,
            // private attributes/methods that the Section component works with
            _selected: id === selectedId,
            _onSelect: this.onSelect
        });
    },

    // when this section is selected, inform the parent Accordion component
    onSelect: function (id) {
        this.setState({selected: id});
    }
});


module.exports = Accordion;

и компонент AccordionSection выглядит так:

const React = require('react');


const AccordionSection = React.createClass({

    render: function () {

        const className = 'accordion-section' + (this.props._selected ? ' selected' : '');

        return (
            <div className={className}>
                <h3 onClick={this.onSelect}>
                    {this.props.title}
                </h3>
                <div className='body'>
                    {this.props.children}
                </div>
            </div>
        );
    },

    onSelect: function (e) {
        console.log('event:',e);
        // tell the parent Accordion component that this section was selected
        this.props._onSelect(this.props.id);
    }
});



module.exports = AccordionSection;

все работает, и CSS работает, но проблема в том, что onClick не регистрируется. Так что нажатие на элементы аккордеона ничего не делает. Кто-нибудь знает, почему обработчик onClick не может быть зарегистрирован в этой ситуации?

Источник

2 ответа

Решение

React DOM отображает в строку только отправляет исходный HTML в виде строки без JS.
Вам также необходим клиентский маршрутизатор реакции, который будет подключать необходимые обработчики JS к HTML на основе их идентификаторов реагирования. JS должен работать с обеих сторон.
Универсальный шаблон рендеринга для быстрого запуска. https://github.com/erikras/react-redux-universal-hot-example
Еще один вопрос, который похож на ваш. React.js Сервер рендеринга и обработчики событий

Источник

Ни одна из ловушек не будет зарегистрирована в ReactDOMServer.RenderToString. Если вы хотите выполнить рендеринг + хуки на стороне сервера для вашего реагирующего компонента, вы можете связать его на клиенте (webpack, gulp и т. Д.), А затем также использовать ReactDOMServer.RenderToString на сервере.

Вот запись в блоге, которая помогла мне сделать это: https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html

Источник
Другие вопросы по тегам