将之前项目的组件替换为React来实现

第16周的课程里面完成的那个慕云游商城项目，如果我想把里面的部分组件替换成React方式来实现的话可行吗？就是项目整体不变，可以直接引用封装好的React组件吗？

就比如说那个PC端项目里面封装了loading公共组件，我该怎么样把这个loading组件改写成react类组件或者函数式组件的样式，然后给其他的各个组件使用呢？

以机酒自由行那个版块为例，原来的代码是这样

机酒自由行代码：

<div class="hd clearfix">
    <h2>机酒自由行</h2>
    <em>挑选全球机票、酒店、邮轮等旅行产品</em>
    <nav>
        <ul>
            <li class="current"><a href="">近期好货</a></li>
            <li><a href="">新品汇聚</a></li>
            <li><a href="">定制游</a></li>
            <li><a href="">国内推荐</a></li>
            <li><a href="">优惠机票</a></li>
            <li><a href="">热门海岛</a></li>
            <li><a href="">热卖签证</a></li>
        </ul>
    </nav>
</div>
<div class="bd clearfix">
    <% include ('../../../../components/loading/loading.art',{
        inline:true,
        text:'ZSY拼命加载中...'
    }) %>
</div>

loading组件代码：

<div class="loading {{inline?'loading-inline':''}}">
    <div class="loading-indicator">
        <img src="./loading.gif" alt="loading">
    </div>
    <div class="loading-text">{{text?text:'加载中...'}}</div>
</div>

小fa花 2022-03-23

源自：项目：React旅游网 1-5 【项目重构】组件化思想实践

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2022-03-23 13:35:08

同学你好，可以用html文件同时引入art-template以及react，例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <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>
</head>

<body>
    <!-- art-template -->
    <div id="tel"></div>
    <script id="tpl-user" type="text/html">
        {{if user}}
        <h2>{{user.name}}</h2>
        {{/if}}
    </script>

    <!-- react -->
    <div id="like_button_container"></div>
    <script>
        // art-template
        document.getElementById("tel").innerHTML = template("tpl-user", {
            user: {
                name: "xxx"
            }
        })

        // react
        const e = React.createElement;

        class LikeButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    liked: false
                };
            }

            render() {
                // 如果liked为true，返回字符串替换按钮
                if (this.state.liked) {
                    return 'You liked this.';
                }

                // 返回创建的button按钮
                return e(
                    'button', {
                    onClick: () => this.setState({
                        liked: true
                    })
                },
                    'Like'
                );
            }
        }
        const domContainer = document.querySelector('#like_button_container');
        ReactDOM.render(e(LikeButton), domContainer);
    </script>
</body>

</html>

自己测试下。

收起回答

小fa花提问者 #1

好的，我理清楚了，也测试成功了，谢谢老师！

2022-03-23 14:00:02

好帮手慕星星 2022-03-23 11:23:54

同学你好，art-template项目一般不与react混用。art-template是模板引擎，react是框架，里面有JSX语法，两种不同的实现方式。

祝学习愉快~

收起回答

提问者小fa花 #1

那如果是没有用art-template的项目呢，就以慕云游商城组件化之前的那种状态为例，整个页面内容都在一个HTML文件中，我怎么把机酒自由行模块用React组件的方式插入到HTML文档中呢？
我的想法是把HTML里面的机酒自由行部分的html替换成一个id为“root”的div标签，然后在机酒自由行的index文件中用ReactDOM.render()把机酒自由行的组件挂载到“root”上，这样可以吗？我看到别人说可以直接用script标签CDN引入react、reactdom和babel，那这样引入的话是不是可以不用全局安装react的配置了？

2022-03-23 11:49:06