你知道怎么在 HTML 页面中使用 React吗

2022-04-16 19:53:09 来源：易采站长站作者：

index.html代码：

引入react、react-dom、babel、moment、antd等

<!DOCTYPE html><html lang='zh-CN'>t="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="libs/antd/antd.min.css">    <link rel="stylesheet" href="css/index.css">    <style type="text/css">    </style>    <script type="text/javascriptdateFormat = 'YYYY-MM-DD'    timeFormat = 'HH:mm:ss'    constructor(props) {        super(props);        let now = new Date().valueOf();        this.state = {            dateStr: moment(now).format(this.dateFormat),            timeStr: moment(now).format(this.timeFormat)        }        this.onChangeDate = this.onChangeDate.bind(this);        this.onChangeTime = this.onChangeTime.bind(this);        this.updateDatePickerAndTimePicker = this.updateDatePickerAndTimePicker.bind(this);    }    onChangeDate(date, dateString) {        this.setState({ dateStr: dateString });    }    onChangeTime(time, timeString) {        this.setState({ timeStr: timeString });    }    updateDatePickerAndTimePicker() {        let now = new Date().valueOf();        this.setState({            dateStr: moment(now).format(this.dateFormat),            timeStr: moment(now).format(this.timeFormat)        });    }    render() {        return <div style={{ display: this.props.isShow ? '' : 'none' }}>            <h1>Hello {this.props.name}, Now is {this.state.dateStr} {this.state.timeStr}</h1>            <antd.DatePicker onChange={this.onChangeDate} value={moment(this.state.dateStr, this.dateFormat)} />                        <antd.TimePicker onChange={this.onChangeTime} value={moment(this.state.timeStr, this.timeFormat)} />            <br />            <antd.Button type="primary" size="default" style={{ marginTop: '10px' }} onClick={this.updateDatePickerAndTimePicker} >更新日期时间控件值</antd.Button>        </div>;    }}

效果图：

你知道怎么在 HTML 页面中使用 React吗