ckinmind / react-cnode

👨🏻‍💻React构建的cnode社区(附详细问题说明)
https://ckinmind.github.io/react-cnode
15 stars 7 forks source link

函数式组件也可以包一层容器组件 #23

Open ckinmind opened 7 years ago

ckinmind commented 7 years ago

如题,代码如下

const Footer = ({loginname, MessageCount}) => (
    <footer className="common-footer">
        <div className="zhanwei"></div>
        <ul className="menu" data-flex="box:mean">
            <IndexLink to="/" activeClassName="on">
                <i className="iconfont icon-shouye"></i>首页
            </IndexLink>
            <Link to="/topic/create" activeClassName="on">
                <i className="iconfont icon-fabu"></i>发表
            </Link>

            <Link to="/my/messages" activeClassName="on">
                <i className="iconfont icon-xiaoxi"></i>消息{ MessageCount > 0 ? <em>{ MessageCount }</em> : ''}
            </Link>
            <Link to={ loginname ? '/user/' + loginname : 'siginin'} activeClassName="on">
                <i className="iconfont icon-wode"></i>我的
            </Link>
        </ul>
    </footer>
);

const mapStateToProps = state => ({
    loginname: state.User.loginname,
    MessageCount: state.MessageCount.count
});

export default connect(mapStateToProps)(Footer);