html与js项目引入react框架之父子或子子传值

最新推荐文章于 2024-05-30 15:14:59 发布
最新推荐文章于 2024-05-30 15:14:59 发布
阅读量313 收藏
点赞数 1
分类专栏： react 文章标签： react.js html5 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51062476/article/details/120552656
版权

一、react的引入

需要引入三个文件

1.react.js

https://unpkg.com/react@17/umd/react.development.js

https://unpkg.com/react-dom@17/umd/react-dom.development.js

2.babel.js（因为react是xml编写的，所以需要用babel编译才不会报错）

https://unpkg.com/@babel/standalone/babel.min.js

以上都可以直接引入或者打开连接下载js代码，我是将代码下载本地做演示

<script src="./static/react.development.js"></script>
<script src="./static/react-dom.development.js"></script>
<script src="./static/babel.js"></script>

一定要按照上面的顺序，否则会报错

二、refs标记元素获取DOM实例

1.创建方法getValue：使用箭头函数可以省略bind创建

2.方法中执行获取refs标记元素需要的值

3.ref标记在元素上，等号后面命名

<!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>
</head>
<style>
    .styleClass {
        background-color: red;
        color: blue;
    }
</style>

<body>
    <div id="app"></div>
</body>
<script src="./static/react.development.js"></script>
<script src="./static/react-dom.development.js"></script>
<script src="./static/babel.js"></script>
<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        render() {
            return (
                // 组件嵌套最外层一定要加div
                <div>
                    <Header title={this.props.header} ></Header>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
        }
        //创建方法，点击按钮后执行alert
        getValue = () => {
            //获取被ref标记的元素，获得输入框中的值
            alert(this.refs.msg.value);
        }
        render() {
            // ref命名为msg放置input元素中
            return (
                <div>
                    <input ref='msg' />
                    <h1 className="styleClass">{this.props.title}</h1>
                    <button onClick={this.getValue}>点击获取内容</button>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="头部描述" />, document.getElementById('app'))

</script>

</html>

 效果演示，输入框在输入内容后，点击按钮弹出输入内容

三、通过refs子传父

1.首先给父组件创建一个接收子组件数据的方法

2.方法中使用refs来改变父组件元素的内容

3.子组件在方法中，利用this.props来获取方法并调用

<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        constructor(props) {
            super(props);
        }
        //父组件创建接收子组件数据的方法
        getConentValue = (value) => {
            // 方法执行后将值通过refs标记的元素进行内容改变
            this.refs.showMsg.innerHTML = value;
        }

        render() {
            return (
                // 组件嵌套最外层一定要加div
                // 将ref标记在元素上命名showMsg
                <div>
                    <Header title={this.props.header} getConentValue={this.getConentValue} ></Header>
                    <Content title={this.props.content} isLogin={this.props.isLogin} ></Content>
                    <Footer title={this.props.footer}></Footer>
                    <div ref="showMsg">这里等下展示content中文本框的内容</div>
                </div>
            )
        }
    }

    // 子组件创建
    class Header extends React.Component {
        constructor(props) {
            super(props);
        }
        //子组件创建方法
        getValue = () => {
            // 获取子组件标记的input值
            var value = this.refs.msg.value
            // 调用父组件方法进行子传父，并执行父组件方法使父组件标记的ref元素内容修改
            this.props.getConentValue(value);
        }
        render() {
            return (
                <div>
                    <input ref='msg' />
                    <h1 className="styleClass">{this.props.title}</h1>
                    <button onClick={this.getValue}>点击获取内容</button>
                </div>
            )
        }
    }
    class Content extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            // 子组件获取数据做判断
            var button = null;
            if (this.props.isLogin == 1) {
                button = <button>已登录</button>
            } else {
                button = <button>未登录</button>
            }
            //将DOM元素存入变量，使用{}可以动态展示
            return (
                <div>
                    {button}
                    <h2>{this.props.title}</h2>
                </div>
            )
        }
    }

    class Footer extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                list: [1, 2, 3]
            }
        }
        render() {
            // 使用map获取list中每个数据进行渲染
            // 循环渲染一定要加key,否则或报错
            var liList = this.state.list.map(function (item, index) {
                return <li key={index}>{item}</li>
            })
            return (
                <div >
                    <h1 className="styleClass">{this.props.title}</h1>
                    <ul>{liList}</ul>
                </div>
            )
        }
    }

    ReactDOM.render(<Home header="头部描述" content='内容描述' footer='底部描述' isLogin='1' />, document.getElementById('app'))

</script>

 按钮没点击前

 input中输入内容点击按钮文本发生改变

四、子传子

1.子传子需要一个bus来进行数据存储及处理，在react中React.createContext()就是用于存储数据和方法的容器

这里演示使用组件分离式写法，正常框架可以直接用import，我使用的是html写法，所以只能用js文件引入

bus.js代码：主要做储存数据及方法作用

//创建统一储存数据组件
const ThemeContext = React.createContext('100');

home.js代码：父组件，页面最主要页面，映入js，css以及框架文件

在父组件内使用static声明contextType，this.context在组件内才可以被使用，这样可以获取React.createContext('100')后面100的默认值。

然后在父组件render()页面渲染中，添加ThemeContext.Provider，设置数据与运算。

<!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>
</head>

<body>
    <div id="app"></div>
</body>
<script src="./static/react.development.js"></script>
<script src="./static/react-dom.development.js"></script>
<script src="./static/babel.js"></script>
<script type="text/babel" src="./bus.js"></script>
<script type="text/babel">
    // 父组件创建
    class Home extends React.Component {
        constructor(props) {
            super(props);
        }

        //使用static声明contextType，this.context在组件内才可以被使用
        static contextType = ThemeContext;

        render() {
            //获取createContext中的默认值100
            let num = this.context
            return (
                // 组件嵌套最外层一定要加div
                // 将储存数据标签应用并使用.Provider，在value内可以储存值或方法
                <div>
                    <h1>起始数字{num}</h1>
                    <ThemeContext.Provider value={{
                        num,
                        add: function () {
                            this.num++
                        },
                        reduce: function () {
                            this.num--
                        }
                    }}>
                        <Child1></Child1>
                        <Child2></Child2>
                    </ThemeContext.Provider>
                </div>
            )
        }
    }
</script>
<script type="text/babel" src="./child1.js"></script>
<script type="text/babel" src="./child2.js"></script>
<script type="text/babel">
    ReactDOM.render(<Home />, document.getElementById('app'))
</script>

</html>

2.子组件注意引入顺序，需要放在父组件之后引入。

子组件中需要使用static声明contextType，this.context在组件内才可以被使用，这样就可以获取bus内的参数与计算方法

child1.js:减法运算并得出结果

class Child1 extends React.Component {
    constructor(props) {
        super(props);
    }
    //使用static声明contextType，this.context在组件内才可以被使用
    static contextType = ThemeContext;
    reduce = () => {
        //获取储存器中的减法方法
        this.context.reduce();
        this.refs.reduceNum.innerHTML = '剪完后得到数字' + this.context.num;
    }
    render() {
        return (
            <div>
                <button onClick={this.reduce} >减法</button>
                <div ref='reduceNum'>剪完后得到数字</div>
            </div>
        )
    }
}

child2.js:加法运算并得出结果

class Child2 extends React.Component {
    constructor(props) {
        super(props);
    }
    //使用static声明contextType，this.context在组件内才可以被使用
    static contextType = ThemeContext;
    add = () => {
        //获取储存器中的加法方法
        this.context.add();
        this.refs.addNum.innerHTML = '加完后得到数字' + this.context.num;
    }
    render() {
        return (
            <div>
                <button onClick={this.add} >加法</button>
                <div ref='addNum'>加完后得到数字</div>
            </div>
        )
    }
}

页面最终结果实现

开始没有数字

 点击减法一下显示99

点击加法一下会在得到的99基础上加1等于100

 

 

麦圈先生
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML父子页面
07-03
HTML父子页面
React父子组件间的传值的方法
10-17
在单页面里面，父子组件传值是比较常见的，这篇文章主要介绍了React父子组件间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react--父子传值--兄弟传值
weixin_42260975的博客
07-08 407
react父子传值，兄弟传值 一、父组件向子组件传值——利用props属性传值 父组件向子组件传值，在子组件中进行数据列表渲染； 父组件：BCustomerList class BCustomerList extends React.Component{ constructor(props){ super(props); this.state = { ...
html嵌套父js的数据,javascript控制html父子框架iframe的值传递及方法引用问题
weixin_28746327的博客
06-04 135
这里要讨论的问题涉及到这几个方面：1. 父框架获取子框架的元素值2. 子框架获取父框架的元素值3. 子框架之间的元素值获取4. 父框架调用子框架的方法5. 子框架调用父框架的方法6. 子框架之间的方法调用以下是根据收集与查阅整理的一些资料，仅作参考，不足之处敬请指正。首先以三个简单的页面作为例子进行说明主页面代码：主页面function showSubValue(){//var v = windo...
使用react进行父子组件传值
u011927449的博客
07-16 147
在单页面里面，父子组件传值是比较常见的，之前一直用vue开发，今天研究了一下react的父子组件传值，和vue差不多的思路，父组件向子组件传值，父通过初始state，子组件通过this.props进行接收就可以了；子组件向父组件传值需要绑定一个事件，然后事件是父组件传递过来的this.props.event来进行值的更替，话不多说，上代码： 父组件向子组件传值： 父组件Comment.js: import React from "react" import ComentList from "./Comen
html元素的父子关系的使用
guoguo19811025的专栏
08-15 7482
    function show(obj){   var p = obj.parentElement;   p.cancelBubble = false;    //去掉冒泡没有成功,遗憾   alert(p.type);  }  function show1(obj)  {   var p = obj.children[0];   alert(p.type);  } //-->    he
如何在qiankun框架中父子传值
m0_55861837的博客
11-07 2319
继上一篇入门微前端的qiankun，为其补充了传值，完善了逻辑
前端框架 React 学习总结
qq_50909707的博客
11-17 6750
（1）创建store仓库，reducers分开管理reducers: 数据开发中type字符串应放入一个常量管理default:}}default:}}count,user}//1、引入redux//引入日志//导入reducers//2、创建仓库//合并多个reducer})（2）导入到src/index.js文件,全局配置(3)组件中的使用return (
React——简介、JSX、组件、传值 React Props、状态 React State
qq_56668869的博客
10-11 964
React的简介、JSX语法、组件、传值 React Props、状态 React State
React 子组件向父组件传值的方法
08-29
本篇文章主要介绍了React 子组件向父组件传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react 父组件与子组件之间的值传递的方法
08-29
本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react 中父组件与子组件双向绑定问题
10-16
主要介绍了react 中父组件与子组件双向绑定问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
electron-react-javascript-boilerplate:使用react框架和JavaScript创建电子应用程序的最小模板
05-14
电子ReactJavaScript样板-文档 该模板是使用React前端框架创建可扩展电子应用程序的基础，所有这些都由webpack进行了编译，从而允许使用最新的ECMAScript标准。 通过设计，该模板是最小的，从而减少了定制所需的开销...
react与html结合使用
weixin_50723565的博客
06-17 4072
主要介绍react在html重点 使用
React UseMemo源码分析
hawk2014bj的博客
05-30 220
Memo 的原理是根据依赖项变化判断是否更新，数据存在 FiberNode 上进行集中控制，更新时从组件的 FiberNode 上获取上次记录的状态并与本次的状态进行比较，并根据比较结果进行相应的处理。
基于 React + Nest 全栈开发的后台系统
白雾茫茫丶
05-27 827
这篇文章介绍了一个基于React+Nest全栈开发的后台系统XmwAdmin。项目包括前端和后端技术栈，线上预览地址和登录信息。作者推荐使用pnpm包管理工具和特定的环境依赖。文章提供了项目的运行和编译代码，以及各个功能模块的介绍。还包括演示图和项目活动以及总结部分。数据库下载链接也提供了，该项目已完成后台的核心功能。
WEB三大主流框架之React
wangbo_angel的博客
05-30 662
React 是一个用于构建用户界面的开源JavaScript库，由Facebook开发并维护。它专注于构建单页应用程序（SPA）和移动应用程序的用户界面。React 以其组件化架构、虚拟DOM和声明式编程范式而闻名，这些特点使得它在开发大型和复杂的前端应用时非常高效。
React-表单受控绑定
最新发布
weixin_46479909的博客
05-30 196
2.通过value属性绑定状态，通过onChange属性绑定状态同步的函数。概念：使用React组件的状态（useState）控制表单的状态。1.准备一个React状态值。
react hooks 父子传值
04-01
React Hooks 提供了一些函数来处理父子组件之间的传值，其中最常用的是 useState 和 useContext。 useState 可以在父组件中定义一个状态，然后将该状态和修改该状态的函数传递给子组件。子组件可以使用该函数来修改...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值