2016-04-18 4 views
0

Я использую response.js в качестве библиотеки шаблонов в приложении node.js. Я использую синтаксис jsx для своих реагирующих компонентов. У меня есть маршрут, похожий на/entity, который отображает файл entity.jsx (это представление). У меня есть следующий код в файле entity.jsx. Я пытаюсь вызвать onclickhandler в своем коде и его не работает. Я не показываю его явно с помощью React.render, но компонент отображается в браузере, когда я нажимаю localhost:/entities, но обработчик onclick не запускается.React.js обработчик onclick не работает

var MyComponent = React.createClass({ 
    alertMessage: function() { 
     alert(this.props.name);        
    }, 
    render: function() { 
     return (
     <div onClick={this.alertMessage}> 
     Hello {this.props.name} 
     </div> 
    ); 
    } 
}); 

примеры, которые я видел онлайн визуализации JSX скрипт внедренный внутри HTML и компонент отображается внутри HTML-тега сНу, но я пытаюсь использовать react.js в моем Node.js приложения. Я не хочу отображать его внутри тега html, но компонент должен отображать на основе URL-адреса и должен быть динамическим

У меня есть следующий фрагмент кода в моем файле index.js в моем приложении-узле. Я ударил объекты «сущности» через файл index.js, который отображает объекты представления.

app.get('/entities', function(req, res) { 
    res.render('entities', { 
    title: 'Entities - Turkey Disclosure', 
    name: 'Entities', 
    selection: 'header-entities' 
    }); 
}); 
+0

Это не работает. По-видимому, это верно для синтаксиса ES6 только – medha

+0

ваш пример работает так, как вы ожидаете [скрипка] (https://jsfiddle.net/69z2wepo/39094/) –

+0

Я не использую React.render. Когда я это сделаю, я получаю сообщение об ошибке ReferenceError: document не указан – medha

ответ

1

Если вы меня поняли, вы используете React.renderToString() для рендеринга в приложении узла. React не вставляет onClick и другие операторы событий непосредственно в разметку. Если вы хотите сохранить эти события, вы должны позвонить React.render() на узле, который уже имеет разметку, предоставленную сервером. React сохранит его и только присоединяет обработчики событий, позволяя вам иметь очень эффективный опыт первой загрузки.

There's a nice article поясняет разницу между тремя методами рендеринга в реактиве.

Смежные вопросы