开发者社区> 黎燃> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

React函数组件详解

简介: React函数组件详解
+关注继续查看

通过 Props 传递数据

让我们试试水,并尝试将数据从电路板组件传输到正方形组件。
我们强烈建议您在本教程中编写代码时不要使用复制/粘贴。这将加深你对react的记忆和理解。
在board组件的rendersquare方法中,我们将代码重写如下,将名为value的prop传递给square:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}
class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

在这里插入图片描述
现在,让我们修改正方形组件的渲染方法,以便无论何时单击正方形,都可以显示当前状态值:
在<按钮>标签中,放置此道具。值被此状态替换。价值
设置onclick={…}事件侦听器函数被onclick={()=>this.setstate({value:'x}})替换。
为了更好的可读性,将classname和onclick的属性写成两行。
修改后,方形组件中渲染方法的返回值中的标记变为:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

在方形组件集状态的渲染方法中的onclick事件侦听器函数中调用此函数,我们可以在每次单击<按钮>时通知react重新渲染方形组件。更新组件后,此状态。value的值将变成“x”,因此我们可以在游戏板上看到x。单击任意正方形,将显示X。
每次在组件中调用setstate时,react将自动更新其子组件。

函数组件

接下来,我们将正方形组件重写为函数组件。
如果要编写的组件仅包含渲染方法而不包含状态,则更容易使用功能组件。我们不需要定义来自react组件类的继承,我们可以定义一个函数,该函数将props作为参数,然后返回要呈现的元素。函数组件编写起来不像类组件那么麻烦。许多组件可以使用功能组件编写。
用以下函数替换square类:

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

当我们将square更改为函数组件时,我们还将onclick={()=>this.Props.onclick()}更改为较短的onclick={Props.onclick}(请注意,两侧没有括号)。
上面提到的react元素在JavaScript中被视为一级JavaScript对象,因此我们可以将react元素作为参数传递给应用程序。在react中,我们还可以使用react元素数组来渲染多个元素。
在JavaScript中,数组有一个map()方法,该方法通常用于将一个数组映射到另一个数组,例如:

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]

在这里插入图片描述

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
React-17:组件的生命周期
React-17:组件的生命周期
76 0
深入React组件生命周期
上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结。 在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化。
1078 0
从零学React Native之13 持久化存储
数据持久化就是指应用程序将某些数据存储在手机存储空间中。 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 AsyncStorage API RN框架为开发者提供了 AsyncStorage API,开发者可以利用它将任意“字符串键值对”保存到存储空间中。 它是简单的
1501 0
从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式。 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本布局。详情见上一篇文章从零学React Native之10Text TextInput属性 只列出了一些常用的,详情见官网 属性名 描述 default
1106 0
从零学React Native之10Text
在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中。虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么简单。 任何一个组件,都有样式和属性,样式一般约束控件的样式和位置,定义在style属性中。属性就是直接声明在控件上。 Text样式 Text组件支持View的所有样式
1242 0
从零学React Native之04自定义对话框
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 从零学React Native之03页面导航 本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其
1540 0
从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给大家介绍了简单界面的搭建, 这一篇我们需要两个界面, 一个是注册界面,一个是注册信息界面. 当然我们还需要一个组件去控制两个界面的切换. 每个界面其实就一个组件 , 可以
1239 0
从零学React Native之02状态机
本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭建 2.状态机添加 3.渲染框架简介 4.语法简化 搭建界面 之前我们介绍了如何创建一个应用,现在我们来开发一个简单的注册界面。注释都写在代码里了, 如下: 进入项目
1297 0
+关注
112
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载