组件和状态

Reads: 20618 Edit

New wiki page content

<!-- learn react -->
----
<html>
<head>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
<script type="text/babel">

class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        }
    }

    render() {
        const
            hour = this.state.date.getHours(),
            hello = hour < 12 ? "Good morning" : (hour > 18 ? "Good afternoon" : "Good evening"),
            time = this.state.date.toLocaleTimeString();
        return (
            <div>
                <h1>{hello}, {this.props.name}</h1>
                <h2>It is {time}</h2>
            </div>
        );
    }
}

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

</script>
</body>
</html>

Comments

Make a comment