Я изучаю использование response.js и имею некоторые проблемы для использования обработчиков событий. Последний вопрос: возможно ли использовать рендеринг на стороне сервера и отправлять обработчики событий клиенту автоматически?
Вот мой пример: У меня есть index.jsx, который я обрабатываю на стороне сервера и отправляю клиенту
var React = require("react");
var DefaultLayout = require("./layout/default");
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
var IndexComponent = React.createClass({
render: function(){
return (
<DefaultLayout title={this.props.name}>
<div>
<h1>React Test</h1>
</div>
<div id="testButton">
<LikeButton/>
</div>
<script type="text/babel" src="/js/react.js"></script>
</DefaultLayout>
)
}
});
Но у "Like Button" нет никакого взаимодействия. Чтобы заставить его делать что-то по клику, я должен добавить эту клиентскую сторону кода.
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('testButton')
);
Я только начинал с react.js, и, возможно, я просто пропустил некоторые основные концепции здесь. Но почему response.js не просто создает код (который я теперь должен добавить вручную клиенту) при рендеринге сервера страниц? Таким образом, у меня избыточный код, и похоже, что это будет беспорядок в больших приложениях. По крайней мере, response.js достаточно умен, чтобы не рисовать два LikeButtons, а "привязать" одну созданную сторону сервера к компоненту на стороне клиента.
