React 入门（六）

实战

结合之前的学习，开发一个简单的项目，点击实现名片翻转：

主要组件：

import React, { Component } from 'react';
import header from './header.svg';
import './Header.css';

class Header extends Component {

    constructor(props) {
        super(props);
        this.state = {showHeader: props.showHeader};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(function(prevState, props) {
            debugger;
            return {
                showHeader: !prevState.showHeader
            };
        });
    }

    render() {
        return (
            <div className={this.state.showHeader?'user reverse ':'user'}>
            <div className="userFront" onClick={this.handleClick}><img src={header} className="image" alt="logo" /></div>
            <div className="userBack" onClick={this.handleClick}>
                <div className="generalInfo">
                    <div className="label">name</div>
                    <div >Tony Wang</div>
                    <div className="label">Address</div>
                    <div >Yangzhou, Jiangsu</div>
                </div>
            </div>
            </div>
        )
    }
}

export default Header;

该组件支持一个属性showHeader，用于设置是否显示为头像。通过点击事件，修改当前的showHeader状态。
结合翻转transform样式实现头像与基本信息的翻转切换。

.generalInfo {
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 20px;
    padding-left: 10px;
    vertical-align: middle;
    width: 60%;
}

.image {
    margin: 0 auto 20px;
    max-width: 250px;
    width: 100%;
}

.label {
    font-weight: bold;
}

.user {
    flex: 1 1 calc(33% - 20px);
    margin: 40px;
    max-width: 350px;
    min-width: 250px;
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.userFront, .userBack {
    border: 1px solid #333;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 30px;

    /* flip transform styles */
    backface-visibility: hidden;
    transition: all 0.6s;
    transform-style: preserve-3d;
}

.userBack {
    font-size: 0.75em;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotateY(-180deg);
    width: 100%;
}

.userFront {
    text-align: center;
    transform: rotateY(0deg);
    z-index: 2;
}

.reverse .userFront {
    transform: rotateY(180deg);
}

.reverse .userBack {
    transform: rotateY(0deg);
}

注：
transform: rotateY表示沿着Y轴旋转。

最后我们在index.js中将Header组件渲染：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Header from './Header';

ReactDOM.render(<Header showHeader={false}/>, document.getElementById('root'));