【React】 8课 react组件内ref绑定子组件

最新推荐文章于 2024-03-25 02:52:48 发布

原创最新推荐文章于 2024-03-25 02:52:48 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍如何从零开始搭建React开发环境，包括创建项目文件夹、安装必要配置文件及依赖包。通过实例代码展示了HTML、JSX语法的使用，以及React组件的创建和引用方法。同时，解释了如何正确加载和操作虚拟DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件

npm init -y
npm i babel-standalone -D
npm i react react-dom -D

安装配置文件教程链接：https://blog.youkuaiyun.com/qq_41614928/article/details/93771657
安装完成后我们开始编写下面代码

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <!-- 所有的页面代码都是放在这里面 -->
  <div id="app"></div>
  <!-- 用于解析jsx的代码 babel引用应在前面 -->
  <script src="./node_modules/babel-standalone/babel.js"></script>
  <!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
  <script src='./node_modules/react-dom/umd/react-dom.development.js'></script>

  <!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
  <script type=text/babel>
    
    //子组件list
    class List extends React.Component{
        render(){
            return (
                <div>
                    <h2> 我是子组件的内容 </h2>    
                </div>
            )
        }
    }

    //父组件Element
    class Element extends React.Component{

      handleClick(e){ //e的事件对象是n+1
        const inp = document.querySelector('input');
        console.log( this._List ) //组件
        console.log( ReactDOM.findDOMNode( this._List ) )  //组件被转化成节点
        console.log(ReactDOM.findDOMNode( this._List )  == this._List ) //false
        console.log(ReactDOM.findDOMNode( this._div  )  == this._div  ) //true
      }
      //将子组件list绑定到 Element组件的this属性中
      render(){
        return (
          <div>
              <div ref={ (e)=>{this._div=e} } > 绑定此DIV元素 </div>
              <List ref={ (e)=>{this._List=e} } ></List>
          </div>  
        )
      }
    }

    ReactDOM.render(
      <Element />,
      document.getElementById( 'app' )
    )
  </script>
</body>
</html>