2022 React 最速上手指南(六)—— JSX 处理函数 & React props

简介: 2022 React 最速上手指南(六)—— JSX 处理函数 & React props

以结果为导向,写给刚学完前端三剑客和想要了解 React 框架的小伙伴,使得他们能快速上手(省略了历史以及一些不必要的介绍)。



JSX 处理函数


在 HTML 中,input 输入框有一个 onchange 事件处理函数,我们可以随意定义一个函数传给 onChange 属性,用来处理 input 的 change 事件,在 React 中这种函数叫做(事件)处理函数。


  • 通常在组件内部定义
  • 函数名称以 handle 开头,事件名称紧随其后


const App = () => {
  const handleChange = (e) => {
    console.log(e.target.value);
  };
  return (
    <div>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" onChange={handleChange} />
      <hr />
      <List />
    </div>
  );
};
复制代码


在浏览器中打开应用,然后按下 F12 打开开发者工具,在终端一栏就可以看到输入框输入的内容了。


这被称为合成事件,由一个 JS 对象拿到输入框的值,本质上就是把浏览器的原生事件包了一层,附加了一些有用的函数。


我们通过给 HTML 元素附加上 JSX 处理函数来响应用户交互,只需要把函数传给这些处理函数,而不是返回值,除非返回值也是一个函数:


// 这样写不对!
<input onChange={handleChange()} />  
复制代码


React Props


我们现在把 list 变量作为一个全局变量供 App 组件和 List 组件直接使用,但如果不同文件中的多个组件使用多个变量是行不通的,我们可以使用所谓的 props 把变量从一个组件传给另一个组件。


先把 list 重命名,并移至 App 组件内部,然后使用 React props 把这个数组传给 List 组件:


const App = () => {
  // 全局变量移入
  const stories = [
    {
      ...
    },
    {
      ...
    },
  ];
  ...
  return (
    <div>
      ...
      <hr />
      <List list={stories} />
    </div>
  );
};
const List = (props) => (
  <ul>
    {props.list.map((item) => (
      ...
    ))}
  </ul>
);
复制代码


stories 变量在 List 组件实例化时赋给了 list 属性,然后我们在 List 组件的函数签名中通过 props 对象中的 list 访问到了它,这样操作可以避免变量污染全局作用域。

个人对 props 的浅薄理解


  • 组件就是一个函数,它对外暴露了一个可以接收外界的数据的接口,也就是 props 对象
  • 可以把 props 理解成从父组件向子组件传递的数据,子组件接收到的 props 已成既定,不可改变
  • 如果组件想要更改它的 props,必须要求父组件传递新的 props 对象,然后将旧的 props 丢弃等待 JS 引擎回收
  • 所以当需要响应用户输入或者实现应用交互时,我们通常使用 state


专栏


因为参加打卡活动是每日更新,所以可能比较短小,可以关注一下 React 入门专栏

在更新完后会整合为一整篇,感谢关注和点赞!

目录
打赏
0
0
0
0
7
分享
相关文章
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
100 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
React函数式组件props的使用(六)
【8月更文挑战第14天】React函数式组件props的使用(六)
87 1
React函数式组件props的使用(六)
|
5月前
|
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
61 0
React JSX
React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`&lt;h1&gt;Hello, world!&lt;/h1&gt;` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
|
5月前
|
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
122 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
React JSX
10月更文挑战第7天
25 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等