鍦?HTML 椤甸潰涓娇鐢?React鐨勫満鏅垎鏋恄HTML/Xhtml

来源：jb51　　时间：2021/12/15 9:12:20　　对本文有异议

璇ユ柟妗堜娇鐢ㄥ満鏅細鍦╤tml椤甸潰涓娇鐢╮eact锛屼富js鏂囦欢index.js鍜屽叾瀹冮潪react鍔熻兘浣跨敤js妯″潡鍖栫殑鏂瑰紡寮€鍙戯紝閫傚悎杞婚噺绾т腑灏忓瀷搴旂敤

index.html浠ｇ爜锛?/p>

寮曞叆react銆乺eact-dom銆乥abel銆乵oment銆乤ntd绛?/p>

<!DOCTYPE html>
<html lang='zh-CN'>
 
<head>
    <title>React in HTML</title>
 
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="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/javascript" src="libs/jquery-1.9.1.js"></script>
 
    <script type="text/javascript" src="libs/react/react.production.min.js"></script>
    <script type="text/javascript" src="libs/react/react-dom.production.min.js"></script>
    <script type="text/javascript" src="libs/babel/babel.min.js"></script>
    <script type="text/javascript" src="libs/moment/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="libs/antd/antd-with-locales.min.js"></script>
 
</head>
 
<body>
    <input id='btn' type="button" class="index-btn" value="鏄剧ずReact缁勪欢" />
 
    <script type="text/babel" src="components/HelloReact.jsx"></script>
 
    <script type="module" src="index.js"></script>
</body>
 
</html>

index.js浠ｇ爜锛?/p>

import { ReactComponentContainer } from './ReactComponentContainer.js'
 
let isShow = true;
let helloReactContainer;
 
$('#btn').on('click', function () {
    if (isShow) {
        helloReactContainer = new ReactComponentContainer('helloReact', HelloReact, { name: 'React' });
        helloReactContainer.show();
        isShow = false;
        $(this).val('闅愯棌React缁勪欢');
    } else {
        helloReactContainer.hide();
        isShow = true;
        $(this).val('鏄剧ずReact缁勪欢');
    }
});

ReactComponentContainer.js浠ｇ爜锛?/p>

璇ユā鍧楃敤浜庡湪html涓樉绀洪殣钘弐eact缁勪欢

class ReactComponentContainer {
 
    component
    componentProps
    componentContainerId
 
    constructor(componentContainerId, component, componentProps) {
        if ($('#' + componentContainerId).length == 0) {
            $('body').append('<div id="' + componentContainerId + '"></div>');
        }
 
        this.componentContainerId = componentContainerId;
        this.component = component;
        this.componentProps = componentProps;
    }
 
    render(isShow) {
        ReactDOM.render(
            React.createElement(
                antd.ConfigProvider,
                {
                    locale: antd.locales.zh_CN
                },
                React.createElement(this.component, Object.assign({ isShow: isShow }, this.componentProps))
            ),
            document.getElementById(this.componentContainerId)
        );
    }
 
    show() {
        this.render(true);
    }
 
    hide() {
        this.render(false);
    }
 
}
 
export { ReactComponentContainer }

HelloReact.jsx浠ｇ爜锛?/p>

class HelloReact extends React.Component {
    dateFormat = '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} >鏇存柊鏃ユ湡鏃堕棿鎺т欢鍊?lt;/antd.Button>
        </div>;
    }
}