我正在编写一个非常简单的Nodejs应用程序。我使用React + Socket.io。
有一个root元素会立即呈现另一个反应组件（你可能想知道为什么我有这个根元素。原因是我希望能够在从服务器收到消息后安装两个组件中的一个，但是为了开始我渲染一个预先选择的组件）。
在这个根组件中，我在componentDidMount中定义了一个套接字。现在问题是我想将这个套接字传递给所有子节点（因此他们可以监听并与服务器消息通信。）但是如果我连接到根目录的null中的服务器，那么在渲染期间没有套接字，因为它还没有连接，'use strict';
var React = require('react');
var ioClient = require('socket.io-client');
var UsersList = require('./usersList');
var Game = require('./game');
var socket;
var Snake = React.createClass({
displayName: 'Snake',
propTypes: {},
getDefaultProps: function() {
return {};
},
mixins: [],
getInitialState: function() {
return ({
usersList: true,
game: false
});
},
componentWillMount: function() {
},
componentWillUnmount: function() {
this.socket.close();
},
componentDidMount: function() {
socket = ioClient.connect(); // this happens after render
},
render: function() {
var result = null;
if (this.state.usersList) {
result = <UsersList socket={socket}/> // therefore this one is passed as null
} else { //game : true
result = <Game socket={socket}/>
}
return (<div>
{result}
</div>)
}
});
module.exports = Snake;
'use strict';
var React = require('react');
var UsersList = React.createClass({
displayName: 'UsersList',
propTypes: {},
getDefaultProps: function() {
return {};
},
mixins: [],
getInitialState: function() {
return ({
usersList:[]
});
},
componentWillReceiveProps: function(){
},
componentWillMount: function() {
},
componentWillUnmount: function() {
},
componentDidMount: function(){
var socket = this.props.socket; // this one was passed into the component as null
socket.on('usersList', function(data){ // so this one returns an error
this.setState({
usersList: data.usersList
});
});
},
render: function() {
var users = [];
for (var i = 0 ; i < this.state.usersList.length ; i++){
users.push(<span>{this.state.usersList[i]}</span>);
}
return(<div>{users}</div>);
}
});
module.exports = UsersList;
将被传递给子组件。
io.connect()所以，现在你可能会问我为什么不把componentWillMount放在Cannot find property "protocol" ...或文件的顶部。嗯，它不起作用！它返回此错误：render。
我无法将其放在componentWillMount， it('clicks on the Home button', function(){
homeTopBanner.homeButton.click();
browser.getCurrentUrl().then(function(url) {
expect(url).toEqual(homeTopBanner.homeUrl);
});
})
，文件顶部...
有关如何做到这一点的任何想法？
答案 0 :(得分：0)
您可以继续componentDidMount进行连接。它不会立即供组件的孩子使用，但是你可以在孩子身上做这样的事情：
componentDidUpdate(prevProps, prevState) {
if ( this.props.socket ) {
// do your connection logic here
}
}
这将确保孩子在第一次连接套接字时可以立即连接并且可以使用它们。在if语句中，您还可以验证this.props.socket不等于prevProps.socket，以防止冗余连接尝试。