react 组件和属性

1.配置react环境

 

2. Comment.js

import React from 'react';

class Comment extends React.Component {
    props;

    constructor(props) {
        super(props);
    }

    static formatDate(t, fmt) {
        fmt = fmt || 'yyyy-MM-dd HH:mm:ss';
        let obj = {
            yyyy: t.getFullYear(),
            yy: ("" + t.getFullYear()).slice(-2),
            M: t.getMonth()+1,
            MM: ("0"+(t.getMonth()+1)).slice(-2),
            d: t.getDate(),
            dd: ("0"+t.getDate()).slice(-2),
            H: t.getHours(),
            HH: ("0"+t.getHours()).slice(-2),
            h: t.getHours() % 12,
            hh: ("0"+(t.getHours()%12)).slice(-2),
            m: t.getMinutes(),
            mm: ("0"+t.getMinutes()).slice(-2),
            s: t.getSeconds(),
            ss: ("0"+t.getSeconds()).slice(-2),
            w: ['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
        };
        return fmt.replace(/([a-z]+)/ig, function($1) {
            return obj[$1];
        });
    }

    render() {
        let that = this;
        return (
            <div className="Comment">
                <UserInfo user={this.props.author} />
                <div className="Comment-text">
                    {that.props.text}
                </div>
                <div className="Comment-date">
                    {Comment.formatDate(that.props.date)}
                </div>
            </div>
        )
    }
}

class UserInfo extends React.Component {
    render() {
        let that = this;
        return (
            <div className="UserInfo">
                <Avatar user={this.props.user} />
                <div className="UserInfo-name">
                    {that.props.user.name}
                </div>
            </div>
        )
    }
}

class Avatar extends React.Component {

    render() {
        return (
            <img className="Avatar"
                 src={this.props.user.avatarUrl}
                 alt={this.props.user.name}
            />
        )
    }
}

export default Comment;

3. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import Comment from './Comment';
import * as serviceWorker from './serviceWorker';

const data = {
    author: {
        name: 'mingzhanghui',
        avatarUrl: 'https://img.jiandan100.cn/images/qa/stu_photo.png',
    },
    text: 'This is test comment.',
    date: new Date(1553848326000)
};

function App() {

    return (
        <Comment {...data}/>
    )
}

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

4. run

npm start

参考文档: https://reactjs.org/docs/components-and-props.html

 

Demo#2  React element

* ShoppingList.js

import React from 'react'

class ShoppingList extends React.Component {
    /*
    render() {
        return (
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
            </div>
        );
    }
     */
    render() {
        return React.createElement('div', {className:'shopping-list'},
            React.createElement('h1', {}, 'Shopping List for ' + this.props.name),
            React.createElement('ul', {},
                React.createElement('li', {}, "Instagram"),
                React.createElement('li', {}, "WhatsApp"),
                React.createElement('li', {}, "Oculus"),
            ),
        );
    }
}

export default ShoppingList;

* index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import ShoppingList from './ShoppingList';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<ShoppingList name="Mark" />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

* run:

npm start

参考文档: https://reactjs.org/tutorial/tutorial.html