天道酬勤,学无止境

在 React JSX 中选择性渲染可选组件属性(Selectively rendering optional component properties in React JSX)

问题

我有一个用例,我有一个 Image 组件,它有一个必需的“src”属性和一个可选的“link”属性,如下所示:

var Image = React.createClass({

propTypes: {
  link: React.PropTypes.string,
  event: React.PropTypes.object,
  src: React.PropTypes.string.isRequired
},

handleClick: function(event, link) {
   analytics.track(event)
    .then(function() {
      window.location = link;
    });
},

render: function() {
  return (
    <img className='image' src={this.props.src} onClick={this.handleClick.bind(this, this.props.event, this.props.link)} />
  );
} });

如果我想在调用 Image 组件时有选择地包含可选道具,我该如何优雅地做到这一点? 我最初的想法是做一个这样的三元表达式,除了这不是有效的 JSX:

render: function() {
    return (
        <Image src={this.props.src} {this.props.link.hasOwnProperty('value') ? link=this.props.link.value : ''} />
    )
}

在上面的示例中,“this.props.link”是一个对象,它可能包含也可能不包含名为“value”的属性,其中包含单击图像时要浏览的超链接。 此外,与其简单地提供一个空字符串作为“link”道具的值,我更愿意在不存在 link.value 的情况下将其完全省略。

我的理由是,只有当 img 实际链接到某处时,我才能在 Image 组件上添加 css“img:hover {cursor:pointer;}”,而不是全局设置它,这违反了我的应用程序的 UX 规则。

我知道我可以简单地在三元组中渲染“链接”道具,如果它存在,它包含链接的值,如果它不存在,则为空字符串,但出于好奇,我想看看是否可能还有另一个方法来实现这一点。

我还想避免必须执行一堆创建大量冗余 JSX 代码的条件语句,如下所示:

render: function() {
    if (this.props.link.hasOwnProperty('value')) {
        return <Image link={this.props.link.value} src={this.props.src.value} />;
    } else {
        return <Image src={this.props.src.value} />;
    }
    .... // other optional properties
}

想象一下,如果您有很多想要放弃的可选道具,那会多么失控......

回答1

看来你多虑了。

<Image src={this.props.src} link={this.props.link.value} />

在您的组件中,您通常应该将任何虚假值视为省略。

if (this.props.link) {
   ...
}

一个例外是数字,或者罕见的(也是最好避免的情况),它是一个默认为 true 的布尔值。


更直接的答案是使用点差(0.12 中的新功能)。

var props = {src: this.props.src};
if (this.props.link.hasOwnProperty('value')) {
  props.link = this.props.link.value;
}

<Image {...props} />

或者

var extraProps = {};
if (this.props.link.hasOwnProperty('value')) {
  extraProps.link = this.props.link.value;
}

<Image src={this.props.src} {...extraProps} />
标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 基于react的H5开发入门基础简介
    一、react是什么?React是一个 JavaScript 库 ,可用来创建用户界面的,可认为是MVC 中的V(视图)。React是 基于Component 的,即组件,React认为一切页面元素都可以抽象成组件,且大部分操作都是针对组件的。1.1 React诞生背景传统的DOM(文件对象模型)操作会对整个DOM树进行重新渲染,时间成本、复杂度高 ,很慢且容易造成卡顿使页面短暂失去响应。为解决DOM操作慢的问题,React引入虚拟DOM,比较新的与旧的虚拟DOM节点之间的差异,最后将diff反映到真实DOM,尽可能减少重绘,提高性能。1.2 React优势与特点 频繁操作DOM代价是昂贵的,React之所以快,是因为它一般不直接操作DOM。React将DOM结构存储在内存中,然后同组件render()的返回内容进行比较,计算出需要改动的地方,最后才反映到真实DOM中。React的优势、特点如下:组件可复用性和扩展性好,开发效率提高不直接操作DOM ,先在虚拟DOM中计算变化,最后将diff反应到真实的DOM中,尽可能减少重绘,提高性能。基于状态实现对DOM控制和渲染 ,是React 的一大创新,将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。1.3 虚拟DOM原理React将新的虚拟DOM(由组件的render方法返回
  • react基础Day01-React概述&脚手架搭建&JSX&组件
    React基础知识点 目标 能够说出React是什么能够说出React的特点能够掌握React的基本使用能够使用React脚手架 什么是React (★★★) React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来 特点 声明式 你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI 基于组件 组件时React最重要的内容,组件表示页面中的部分内容 学习一次,随处使用 使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用 React基本使用 React的安装 npm i react react-dom react 包是核心,提供创建元素,组件等功能react-dom 包提供DOM相关功能 React的使用 引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> 创建React元素 // 创建元素节点 // 1. 元素名称 // 2. 元素属性 传递的是个对象 // 3. 元素内容 let
  • 【React系列】=>[01] React基本使用-脚手架搭建-JSX-组件
    React基础知识点 目标 能够说出React是什么能够说出React的特点能够掌握React的基本使用能够使用React脚手架 什么是React (★★★) React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来 特点 声明式 你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI 基于组件 组件时React最重要的内容,组件表示页面中的部分内容 学习一次,随处使用 使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用 React基本使用 React的安装 npm i react react-dom react 包是核心,提供创建元素,组件等功能react-dom 包提供DOM相关功能 React的使用 引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> 创建React元素 // 创建元素节点 // 1. 元素名称 // 2. 元素属性 传递的是个对象 // 3. 元素内容 let
  • 使用TypeScript在React组件中的默认属性值(Default property value in React component using TypeScript)
    问题 我不知道如何使用Typescript为我的组件设置默认属性值。 这是源代码: class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } } 当我尝试使用这样的组件时: ReactDOM.render(<PageComponent />, document.getElementById("page")); 我收到一个错误消息,说缺少属性foo 。 我想使用默认值。 我也尝试在组件内部使用static defaultProps = ... ,但是我怀疑它没有任何效果。 src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle
  • iOS面试的一些小问题!
    React vs Vue前言:技术选型没有绝对的对与错技术选型要考虑的因素非常多表达自己的观点,并说明理由两者的本质区别:vue - 本质是MVVM框架,由mvc发展而来React - 本质是前端组件化框架,由后端组件化发展而来但两者都能实现相同的功能模板的区别:vue - 使用模板(template)由angular提出React - 使用JSX,一种编程语法,类似于html模板语法上更倾向于JSX:vue中的指令v-需要现学,并且它们的值是放在引号中,比较困惑;而JSX中,只需要知道大括号中可以写JS表达式,就OK模板分离上更倾向于vue组件化的区别:React本身就是组件化,没有组件化就不是Reactvue也支持组件化,不过是在MVVM上的扩张对于组件化,更倾向于React,做的更彻底两者共同点:支持组件化数据驱动视图总结:1.国内,首推vue,文档易读、易学、社区足够大2.团队水平高,推荐使用React,组件化和jsx作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的iOS开发交流群:130595548,不管你是大牛还是小白都欢迎入驻 ,让我们一起进步,共同发展!(群内会免费提供一些群主收藏的免费学习书籍资料以及整理好的几百道面试题和答案文档!)React对组件化的理解与面向对象类似,分为: 封装、继承、多态组件的封装视图数据变化逻辑(数据驱动视图变化
  • Vue 进阶系列(三)之Render函数原理及实现
    Render函数原理根据第一篇文章介绍的响应式原理,如下图所示。在初始化阶段,本质上发生在auto run函数中,然后通过render函数生成Virtual DOM,view根据Virtual DOM生成Actual DOM。因为render函数依赖于页面上所有的数据data,并且这些数据是响应式的,所有的数据作为组件render函数的依赖。一旦这些数据有所改变,那么render函数会被重新调用。在更新阶段,render函数会重新调用并且返回一个新的Virtual Dom,新旧Virtual DOM之间会进行比较,把diff之后的最小改动应用到Actual DOM中。Watcher负责收集依赖,清除依赖和通知依赖。在大型复杂的组件树结构下,由于采用了精确的依赖追踪系统,所以会避免组件的过度渲染。Actual DOM 和 Virtual DOMActual DOM 通过document.createElement('div')生成一个DOM节点。1document.createElement('div')23// 浏览器原生对象(开销大)4"[object HTMLDivElement]"Virtual DOM 通过 vm.$createElement('div')生成一个JS对象,VDOM对象有一个表示div的tag属性,有一个包含了所有可能特性的data属性
  • 揭秘一线互联网企业 前端JavaScript高级面试
    揭秘一线互联网企业 前端JavaScript高级面试 第1章 课程介绍 1-1 导学 (框架介绍&) 1-2 架构 (同步和异步混合调用的顺序性&原型模式&虚拟DOM&MVVM&JSX&自定义bridge网络&) 第2章 ES6 语法 2-1 开始 (ES6标准入门&JavaScript 模块化方案 &打包&Promise&) ES6标准入门,开发环境把es6编译成es5, 2-2 模块化 - 语法 (使用import语句导入模块&export命令) export命令,输出export default只默认输出一个,引入直接写文件名称即可,export好几个需要有大括号具体的使用 使用import语句导入模块,标准迭代越变越简单,大括号括起来fn1和fn2的两个函数,直接正常使用就可以了 util1.js export default { a: 100 } util2.js export function fn1() { alert('fn1') } export function fn2() { alert('fn2') } index.js default不用写大括号,其他的必须要加大括号 import util1 from './util1.js' import { fn1, fn2 } from './util2.js' console.log(util1) fn1()
  • React 基础知识 - 学习笔记
    1、React 安装 通过 npm 使用 React (1)安装全局包 $ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g (2)创建根目录 目录名 --> reactApp --> npm init 初始化 --> 生成 package.json: $ mkdir reactApp $ cd reactApp/ $ npm init name: (reactApp) youj-react-test version: (1.0.0) description: W3Cschool教程 react 测试 entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/laolan/www/reactApp/package.json: { "name": "youj-react-test", "version": "1.0.0", "description": "W3Cschool教程 react 测试", "main": "index.js", "scripts": { "test": "echo \"Error
  • React Hooks和TypeScript完全指南
    引言 React v16.8 引入了 Hooks,它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用,从而易于共享逻辑。Hook 令人兴奋并迅速被采用,React 团队甚至想象它们最终将替换类组件。 以前在 React 中,共享逻辑的方法是通过高阶组件和 props 渲染。Hooks 提供了一种更简单方便的方法来重用代码并使组件可塑形更强。 本文将展示 TypeScript 与 React 集成后的一些变化,以及如何将类型添加到 Hooks 以及你的自定义 Hooks 上。 引入 Typescript 后的变化 有状态组件(ClassComponent) API 对应为: React.Component<P, S> class MyComponent extends React.Component<Props, State> { ... 以下是官网的一个例子,创建 Props 和 State 接口,Props 接口接受 name 和 enthusiasmLevel 参数,State 接口接受 currentEnthusiasm 参数: import * as React from "react"; export interface Props { name: string
  • React高频面试题,值得珍藏!
    说明+感悟:以下所有面试题在本人面试时基本都有出现,当初我在面试时和很多朋友一样,网上搜寻了大量的面试题,疯狂的背诵。说实话,很多面试题确实会被问道,你回答的可能也很标准,但不一定是面试官想要的答案。回答出面试官想要的答案尤为重要。本篇内容,我希望给大家带来的是知识而不是枯燥的背文 前言:React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用。 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。 问:React 的工作原理 React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时,React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变,第二步是调节(reconciliation),会用 diff 的结果来更新 DOM。 (如果有问到什么是react的工作原理,千万不能只回答这一句话
  • react与vue区别及react面试题
    react和vue的区别如下:      1、React与Vue最大的区别是模板的编写。Vue鼓励去写近似常规HTML的模板。写起来很接近标准HTML元素,只是多了一些属性。这些属性也可以被使用在单文件组件中,尽管它需要在在构建时将组件转换为合法的JavaScript和HTML。      2、Vue鼓励去使用HTML模板去进行渲染,使用相似于Angular风格的方法去输出动态的内容。因此,通过把原有的模板整合成新的Vue模板,Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。另一方面,React推荐所有的模板通用JavaScript的语法扩展JSX书写。      3、React推荐所有的模板通用JavaScript的语法扩展JSX书写。React/JSX乍看之下,觉得非常啰嗦,但使用JavaScript而不是模板来开发,赋予了开发者许多编程能力。 ####react面试题#### React 的工作原理 React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时,React 首先会通过 “diffing” 算法来标记虚拟 DOM 中的改变,第二步是调节(reconciliation),会用 diff 的结果来更新 DOM。 使用 React 有何优点 只需查看 render 函数就会很容易知道一个组件是如何被渲染的 JSX 的引入
  • useTypescript-React Hooks和TypeScript完全指南
    引言 React v16.8 引入了 Hooks,它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用,从而易于共享逻辑。Hook 令人兴奋并迅速被采用,React 团队甚至想象它们最终将替换类组件。 以前在 React 中,共享逻辑的方法是通过高阶组件和 props 渲染。Hooks 提供了一种更简单方便的方法来重用代码并使组件可塑形更强。 本文将展示 TypeScript 与 React 集成后的一些变化,以及如何将类型添加到 Hooks 以及你的自定义 Hooks 上。 引入 Typescript 后的变化 有状态组件(ClassComponent) API 对应为: React.Component<P, S> class MyComponent extends React.Component<Props, State> { ... 复制代码 以下是官网的一个例子,创建 Props 和 State 接口,Props 接口接受 name 和 enthusiasmLevel 参数,State 接口接受 currentEnthusiasm 参数: import * as React from "react"; export interface Props { name: string
  • 在React JSX内部循环(Loop inside React JSX)
    问题 我正在React JSX中尝试执行以下操作(其中ObjectRow是一个单独的组件): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> 我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。 但是,由于来自模板领域并且是JSX的新手,所以我不确定如何实现上述目标(多次添加组件)。 回答1 就像您只是在调用JavaScript函数一样。 您不能在for循环中使用函数调用的参数: return tbody( for (var i = 0; i < numrows; i++) { ObjectRow() } ) 了解如何将函数tbody作为参数传递给for循环-导致语法错误。 但是您可以创建一个数组,然后将其作为参数传递: var rows = []; for (var i = 0; i < numrows; i++) { rows.push(ObjectRow()); } return tbody(rows); 使用JSX时,基本上可以使用相同的结构: var rows = []; for (var i = 0; i < numrows; i++) { // note: we are adding a key prop here to allow react to uniquely
  • 【React学习】JSX、生命周期、脚手架
    文章目录 1 React入门1.1 React基础认识1.2 React基本使用1.3 React JSX1.3.1 JSX1.3.2 虚拟DOM1.3.3 渲染虚拟 DOM(元素) 1.4 模块与组件、模块化与组件化的理解 2 React 面向组件编程2.1 自定义组件2.2 组件三大属性2.2.1 state2.2.2 props2.2.3 refs2.2.4 事件处理 2.3 功能界面的组件化编码流程2.4 收集表单数据2.5 组件生命周期2.5.1 生命周期流程图2.5.2 生命周期详述2.5.3 重要的勾子函数2.5.5 **新的生命周期** 2.6 虚拟 DOM 与 DOM Diff 算法 3 react 脚手架3.1 create-react-app3.2 创建项目并启动 参考 文章放置于:https://github.com/zgkaii/CS-Notes-Kz,欢迎批评指正! 1 React入门 1.1 React基础认识 React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库,由 Facebook 开源。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。 传统的Web UI开发的主要问题——DOM API关注太多细节,应用程序状态分散在各处f难以追踪和维护。 而React的特点:
  • 如何使用条件元素并使Facebook React的JSX保持DRY?(How to have conditional elements and keep DRY with Facebook React's JSX?)
    问题 如何在JSX中选择性地包含元素? 这是一个使用横幅的示例,如果已传递该横幅,则该横幅应位于组件中。我要避免的是必须在if语句中复制HTML标记。 render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah... </div> </div> ); } 回答1 只需将横幅标为未定义即可,它就不会包含在内。 回答2 那这个呢。 让我们定义一个简单的帮助If组件。 var If = React.createClass({ render: function() { if (this.props.test) { return this.props.children; } else { return false; } } }); 并以这种方式使用它: render: function () { return ( <div id="page"> <If test={this.state.banner}> <div id="banner
  • react 架构方案_3种轻量级React替代方案:Preact,VirtualDom和Deku
    参考链接: ReactJS-道具概述react 架构方案 本文由Craig Bilner和Bruno Mota进行同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! React的声明性组件和虚拟DOM渲染已席卷了前端开发领域,但这并不是唯一基于这些思想的库。 今天,我们将探讨在其他三个类似React的替代方案中构建应用程序的感觉。 我们假设您已经熟悉React及其在其生态系统中使用的术语。 如果您需要抓紧时间或只是重新整理,请查阅我们之前的文章之一 。 总览 让我们开始对我们将要比较的库进行高级概述。 德库(2.0.0-rc15) Deku的目标是成为React的更多功能替代品。 它防止组件具有局部状态,这允许将所有组件编写为与诸如Redux之类的外部状态管理解决方案进行通信的纯函数。 预先(4.1.1) Preact是尝试使用尽可能少的代码来模仿React的核心功能。 假设您将使用ES2015,Preact将采取一些捷径并精简React的原始功能集,以产生一个只有3KB的微型库。 虚拟DOM(2.1.1) 在React,Deku和Preact为您提供虚拟DOM之上的组件抽象的地方,virtual-dom包为您提供了您自己创建,比较和呈现虚拟DOM节点树所需的底层工具。 ( 这与构建React和Preact的虚拟DOM不同! )
  • 使用reactjs渲染原始HTML(Rendering raw html with reactjs)
    问题 那么这是用reactjs渲染原始html的唯一方法吗? // http://facebook.github.io/react/docs/tutorial.html // tutorial7.js var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> </div> ); } }); 我知道有一些很酷的方法来用JSX标记内容,但是我主要感兴趣的是能够呈现原始html(包括所有类,内联样式等)。 像这样复杂的东西: <!-- http://getbootstrap.com/components/#dropdowns-example --> <div class="dropdown"> <button class="btn
  • React:React入门及基本使用,JSX,state、props、refs、虚拟DOM,面向组件编程,组件生命周期,脚手架及应用,Ajax、router、UI组件库AntDesign、redux
    React全家桶(技术栈) 第1章:React入门 1.1. React的基本认识 1.1.1. 官网 1) 英文官网: https://reactjs.org/ 2) 中文官网: https://doc.react-china.org/ 1.1.2. 介绍描述 1) 用于构建用户界面的 JavaScript 库(只关注于View) 2) 由Facebook开源 1.1.3. React的特点 1) Declarative(声明式编码) 2) Component-Based(组件化编码) 3) Learn Once, Write Anywhere(支持客户端与服务器渲染) 4) 高效 5) 单向数据流 1.1.4. React高效的原因 1) 虚拟(virtual)DOM, 不总是直接操作DOM 2) DOM Diff算法, 最小化页面重绘 1.2. React的基本使用 注意: 此时只是测试语法使用, 并不是真实项目开发使用 1.2.1. 效果 1.2.2. 相关js库 1) react.js: React的核心库 2) react-dom.js: 提供操作DOM的react扩展库 3) babel.min.js: 解析JSX语法代码转为纯JS语法代码的库 1.2.3. 在页面中导入js <script type="text/javascript" src="../js
  • React.js:如何从父级修改动态子级组件状态或道具?(Reactjs: how to modify dynamic child component state or props from parent?)
    问题 我实质上是想让标签页做出反应,但是有一些问题。 这是文件page.jsx <RadioGroup> <Button title="A" /> <Button title="B" /> </RadioGroup> 当您单击按钮A时,RadioGroup组件需要取消选择按钮B。 “已选择”仅表示来自状态或属性的className 这是RadioGroup.jsx : module.exports = React.createClass({ onChange: function( e ) { // How to modify children properties here??? }, render: function() { return (<div onChange={this.onChange}> {this.props.children} </div>); } }); Button.jsx的来源并不重要,它具有触发原始DOM onChange事件的常规HTML单选按钮。 预期流量为: 点击按钮“ A” 按钮“ A”触发本地DOM事件onChange,该事件一直持续到RadioGroup 调用RadioGroup onChange侦听器 RadioGroup需要取消选择按钮B。 这是我的问题。 这是我遇到的主要问题:我无法将<Button>移到RadioGroup
  • React 学习笔记(一):JSX;工厂函数组件、ES6类组件;三大属性(state、props、refs)
    学习视频源自:https://www.bilibili.com/video/BV1Et41137Sb?p=4 UP 主:Java基基 机构:尚硅谷 文章目录 一、相关浅析1.1 React1.2 babel 二、简单上手2.1 引入文件2.2 简单测试2.3 JS 语法和 JSX 语法比较2.4 在Google添加扩展程序:react developer tool2.5 运行性能 三、JSX 练习3.1 效果图3.2 代码3.3 感受 四、React 面向组件编程4.1 React 组件的基本定义和使用方式一、工厂函数组件(简单组件)方式二、ES6 类组件(复杂组件) 4.2 组件三大属性4.2.1 state(1)基础(2)小案例:交互 4.2.2 props4.2.2.1 基础4.2.2.2 小案例(一)4.2.2.3 小案例(二):指定属性值的类型和必要性4.2.2.4 小案例--补充:扩展运算符4.2.2.5 小案例--类组件方式--不知道对不对 4.2.3 refs4.2.3.1 小案例4.2.3.2 代码说明1:event.target.value4.2.3.3 代码说明2:通过 ref 获取DOM元素 4.2.4 state 和 props 的区别4.3 解决 this 问题的两种方法 一、相关浅析 1.1 React React:用于构建用户界面的