我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔来继续讲解一些react相关入门文章,文章都比较浅显,适合于初级入门react的同学。所以,熟手请自动飘过。本文里面,苏南大叔来探讨一下react的新手误区概念之一:react和传统页面写法冲突。再次强调一下:新手入门教程,熟手请飘过。当然,本文中“传统页面写法”这个定义,随着时间的推移,这个概念会发生变化。这里,苏南大叔指的就是:html+js[以jquery为典型代表]

苏南大叔:react入门教程,react和传统页面如何相互访问? - react-page
react入门教程,react和传统页面如何相互访问?(图4-1)

本文中的范例,强烈建议您放在某个www容器内,然后通过http://进行访问,而不是通过file://进行访问,可能会出现一些不可预期的问题。测试环境:chrome@89.0.4389.90,react@16。本文存在的基本理论知识是:可以在网站的一小部分中使用React。这样的话,才会产生相互交互的需求,对吧?

react和传统的页面写法冲突么?

虽然看起来,react(甚至vue)是要彻底改变传统html的写法的。但事实上就目前来说,它们并不冲突,是可以做到相互兼容的。所以,本文的论点是:react和传统页面写法,两者并不冲突。

苏南大叔:react入门教程,react和传统页面如何相互访问? - react-code
react入门教程,react和传统页面如何相互访问?(图4-2)

下面用实验的方式,来探求一下两者不冲突的理论依据。当然,在继续后面的内容之前,苏南大叔希望大家先看看下面的这个文章链接的内容:

传统页面嵌套react

很多react新人,会在页面里面的body里面定义一个idappdiv,然后就在里面写后续react逻辑了。也就是说:body下面就是div[id=app]

事实上是:在body和你的react容器之间,还可以放置传统的html的。页面上的一个小小区域,作为react的容器,也是可以的。

例如:下面的代码

<body>
  <h2>代码范例react和外部相互访问</h2>
  <div id="app"></div>
  <div>底部的传统代码</div>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('app')
    );
  </script>
</body>

相互获取dom

因为react自成一派,可以说是传统页面里面的独立王国。那么,就提出这个概念:传统的html页面,对于react里面的dom是否有管辖权,是否能够访问甚至修改里面的内容。

答案是肯定的,传统写法中的js肯定可以访问并修改react里面的dom,但是这里的dom就是传统意义上的节点了。并不是react的虚拟dom的概念。大家从“见山是山”的层次,要上升到“见山不是山”的层次。但是,并不是推荐大家这么操作,毕竟是要破坏react的规则的。

这里的典型代码就是:

document.getElementById("xxx")

不管是外部的dom还是react里面的真实节点,有id或者class或者xpath,这都是能相互访问到的。这一点非常好理解,不细说了。

相互改写变量

这里需要首先排除闭包里面的变量,以及一些私有的属性或方法。其他的公开的变量的话,也是可以相互访问的。
比如,在外部定义了一个global变量。在react内部就可以使用global.进行访问,在jsx里面也是可以使用下面的类似方式访问的,当然要修改的话,也是这么修改的,大家都晓得。

{global.name}

苏南大叔:react入门教程,react和传统页面如何相互访问? - html-react
react入门教程,react和传统页面如何相互访问?(图4-3)

而外部访问react组件内部的事情,就神奇了。比如访问或改写state数据。这个方式就是,对于ReactDOM.render()赋值到一个变量,然后就可以通过{变量}.state进行操作了。神奇不?例如:

var demo=ReactDOM.render(React.createElement(LikeButton),document.querySelector('#app'));
demo.state.liked=false;

苏南大叔:react入门教程,react和传统页面如何相互访问? - react-code-2
react入门教程,react和传统页面如何相互访问?(图4-4)

相关链接

总结

总体上来说,react组件和传统页面是可以和平相处的。domjs变量,也是可以相互操作的。但是,为了保持react的纯净性,尽量不要这么操作。

更多react相关文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react