这是父组件。这里会有几行选择性地渲染连通分量
//Parent Component
getInitialState(){
return {
active_component: 'UserList'
};
},
render(){
return(
<div>
<div>
{this.state.active_component === 'UserList'?<UserList />:null}
</div>
</div>
);
}
这是连接组件
//UserList component that fails to load props
let UserList = React.createClass({
render(){
let users = this.props.user_list.map((user,idx)=>{
return <UserListItem user={user} idx={idx} />
});
return(
<div>
<div>
Users
</div>
<div style={{display:this.props.fetching_users?'flex':'none'}}>
fetching users ...
</div>
<div>
<ul>
{users}
</ul>
</div>
</div>
);
}
});
function mapStateToProps(state){
return {
user_list: state.admin.user_list,
fetching_users: state.admin.fetching_users
};
}
export default connect(mapStateToProps)(UserList);
user_list prop上的.map()失败,因为没有道具。该组件在三元组外部可以正常工作。有一些我不知道的东西,我只是不确定是什么。 任何洞察力或替代方法来实现我的目标将不胜感激。