React 组件间传值

最新推荐文章于 2023-09-09 11:15:18 发布

小九✲

最新推荐文章于 2023-09-09 11:15:18 发布

阅读量217

点赞数

分类专栏： React 文章标签： react js html

本文链接：https://blog.csdn.net/l_nine/article/details/103658704

版权

本文介绍了React组件间如何传递数据，包括使用props进行父子、兄弟组件间的通信，详细阐述了props和state属性的用法，提供了实例代码展示数据传递过程。

摘要由CSDN通过智能技术生成

React 组件间传值

一、React创建组件的方法

创建组件的方法

组件包括：函数组件和类组件

函数组件

function fn(props){
   
    return <h1>Hello,{
   props.name}</h1>;
}

类组件

//引入react模块
import React from 'react';
//声明子组件son
class R extends React.Component {
   //重写方法render
    render() {
   
        return (
            // 模板字串
            <React.Fragment>
                {
   /* jsx */}
　　　　　　　　　　<h1>hello,{
   props.name}</h1>　
            </React.Fragment>
        );
    }
}

二、props属性和state属性

1 props属性及用法

1、proprs属性是组件之间用来传递参数的，但是props的数据是不可以修改的。并且function中没有构造器，所以只有porps属性传递数据。
2、用法
{this.props.name}

1 state属性及用法

1、 state属性，class声明的组件中有constructor构造函数，可以声明state属性，state属性是class私有的属性，所以值是可以修改的。
2、用法
{this.state.[name]}
修改
{this.setState({ name:值 })}

二、React 传值

首先，我们的HTML代码如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Web site created using create-react-app" />
  <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.

最低0.47元/天解锁文章

小九✲

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React 组件间传值

React 组件间传值一、React创建组件的方法创建组件的方法组件包括：函数组件和类组件(1). 通过function声明的组件特点是：function创建的组件是没有state属性，而state属性决定它是不是有生命周期function没有constructor构造函数function的渲染方法是直接调用function中不可以用箭头函数(2). 通过class声明组...
复制链接

扫一扫