树上骑个猴的博客

【代码】react中 antd使用＜a＞标签报警告：The href attribute requires a valid value to be accessible...

代码】react拍平菜单树结构数据转化为一个普通的单层js对象。

解决方案当你的react版本低于18时,可以采用如下方案

效果图

报错信息：Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.使用一个{} 去渲染一个组件 就会报这样一个错误例如 是一个组件使用时不小心写成了 所以报上面的错误应该将 改为...

Matched leaf route at location “/” does not have an element. This means it will render an with a null value by default resulting in an “empty” page.高版本中Switch已经被换成了Routes错误代码：正确代码

react+antD实现菜单数据递归渲染成导航组件

当我把react-router-dom从v5升级到v6，出现了这个错误消息。我的代码：index.js文件代码App.js文件代码在v6中，您应该将组件作为“元素”传递，例如像这样：或受保护的路线：

需求：

vscode中运行react程序，如何停?

安装插件输入rcc(react class components )可以react类式组件代码片段(代码模板)输入rfc(react function components )可以react函数组件代码块片段(代码模板)其他代码块缩写可参考扩展说明

如果没有模块，同名文件里的样式容易冲突css如果想模块化，需要给css文件名使用xx.module.css然后引入的时候： import 模块名 form ‘xxxx’使用的时候: className={模块名.类名}

Redux 是一个状态管理框架，可以与包括 React 在内的许多不同的 Web 技术一起使用。在 Redux 中，有一个状态对象负责应用程序的整个状态，这意味着如果你有一个包含十个组件且每个组件都有自己的本地状态的 React 项目，那么这个项目的整个状态将通过 Reduxstore被定义为单个状态对象，这是学习 Redux 时要理解的第一个重要原则：Redux store 是应用程序状态的唯一真实来源。这也意味着，如果你的应用程序想要更新状态，只能通过 Redux store 执行，单向数据流可以更

到目前为止，你已经能够在客户端上渲染 React 组件，一般来说我们都是这么做的。然而，在一些用例中，在服务器上渲染一个 React 组件是有意义的。由于 React 是一个 JavaScript 视图库，所以使用 Node 让 JavaScript 运行在服务器上是可行的。事实上，React 提供了一个可用于此目的的renderToString()方法。有两个关键原因可以解释为什么服务器上的渲染可能会在真实世界的应用程序中使用。首先，如果不这样做，你的 React 应用程序将包含一个代码量很少的 HTM

条件渲染很有用，但是你可能需要组件来渲染未知数量的元素。通常在响应式编程中，程序员在应用程序运行时之前无法知道其 state，因为这在很大程度上取决于用户与该程序的交互。程序员需要提前编写代码来正确处理未知状态。在 React 中使用Array.map()阐明了这个概念。在constructor中，创建一个this.state对象并定义两个 state：userInput应该初始化为空字符串，toDoList应该初始化为空数组。接下来，删除items变量旁边render()方法中的注释。取而代之的是，将存

到目前为止，你已经看到了如何使用if/else、&&,、null和三元运算符（condition ? expressionIfTrue : expressionIfFalse）对渲染什么和何时渲染做出有条件的判定。然而，还有一个重要的话题需要讨论，让你将这些概念中的任何一个或所有概念与另一个强大的 React 功能结合起来：props。使用 props 有条件地渲染代码在 React 开发人员中很常见–也就是说：他们使用给定 prop 的值来自动决定渲染什么。在这个挑战中，你将设置一个子组

在继续使用动态渲染技术之前，还有最后一种方法可以渲染你想要的东西，它使用内置的 JavaScript 条件：三元运算符。三元运算符经常被用作 JavaScript 中if/else语句的缩写。它们不像传统的if/else语句那样健壮，但是在 React 开发人员中非常流行，原因之一就是 JSX 的编译原理，if/else语句不能直接插入到 JSX 代码中。你可能在前几个挑战就注意到了这一点–当需要if/else语句时，它总是在return语句外面。如果你想在 JSX 中实现条件逻辑，三元表达式是一个很好的选

MyComponent 的 state 中包含一个布尔值，用于跟踪是否要在 UI 中显示某个元素。按钮切换此值的状态。目前，它每次都呈现相同的 UI。用if/else语句重写render()方法，如果display为true则返回当前标记。否则，返回不带h1元素的标记。class MyComponent extends React.Component { constructor(props) { super(props); this.state = { display: t

在之前的挑战中，你学习了如何使用大括号{ }将 JavaScript 代码插入到 JSX 代码中，用于访问 props、传递 props、访问 state、在代码中插入注释以及最近学习的定制组件样式等任务。这些都是将 JavaScript 放在 JSX 中的常见用例，但是在 React 组件中使用 JavaScript 代码还有其他方式。在render方法中编写 JavaScript，你可以把 JavaScript 直接放在return语句之前，而不必将其插入大括号中。这是因为它还不在 JSX 代码中。当

以下是 HTML 中内联样式的示例：Mellow YellowJSX 元素使用style属性，但是由于 JSX 的传输方式，你不能将值设置为字符串。相反，你应将其设置为 JavaScript对象。这里有一个例子：注意我们使用驼峰式命名的 “fontSize” 属性，这是因为 React 不会接受样式对象中的连字符。React 将在 HTML 中为我们应用正确的属性名称。案例：class Colorful extends React.Component { render() { ret

简写方式二：平时使用react和componet可简写成：原理：举个例子：通过export暴露Component，所以引入的时候要写成:{Component}APP可以这么简写(直接export default出去)：编写一个Hello组件文件，且放置到components文件夹在App.js引入Hello组件效果给组件来点颜色引入使用把Hello组件的Js和css文件都放在一个文件夹里面在新建一个welcome组件，注意组件文件名是大写开头渲...

public是静态资源第一种写法和第二种写法是等价的在这里插入图片描述

1.全局安装2.在自己电脑创建react项目cd react_staginyarn start

diff算法最小单位是节点，也就是上图中的span会进行对比，然后进过对比发现{}里的内容变了就更新。span里的input没变就不更新需求:往ul列表里面添加成员，每次成员新增在数组第一个位置方式一，使用index作为key此时生成更新前后的虚拟dom进行对比首先去找相同的key发现key一样，就对比内容，发现内容变了生成新的真实dom，替换旧的真实dom导致一个后果：只有小王是新增的，但是其他成员也被重新生成dom进行替换。而且各个成员索引值也变了。如果是非常多的数据，就到...

需求：实现一个类似刷微博一样不断滚动的列表。此时想要实现代码控制滚动条向下滚动获取内容区高度改成react写法代码实现每过一段时间，就向新闻列表添加一条新闻但是会一直往上移动需求：在看某个新闻的时候，能够停止。官方文档这样解释：...

所以适用于想把状态只与props绑定的情况getDerived…可以有2个参数，所以可以实际应用的时候可以对比一下，看使用哪一个getDerived…会影响和挂载和更新

原因：日常开发，也不会用上面三个钩子。新的生命周期，去掉了3个，新增了两个

创建子组件和父组件，父组件包含子组件想要调用componentwillReceiveProps必须要父组件通过props传参数，并且初始化(第一次)不会调用，要更新props的时候才会调用点击按钮也可以携带参数本例就是通过调用父组件来触发componentwillReceiveProps生命周期函数。...

最常用的是流程2setState的时候： 还要经过2个事件才回到render如果定义了shouldComponentUpdate函数，则必须要返回false或者true，如果写了false，则生命周期不会向下走了

新增2个钩子，删除了3个旧的生命周期：需求，实现一个点击按钮+1的功能：实现的代码：看看会不会走这几个生命周期：

实现一个组件，需求如下：第一步，实现点击按钮卸载组件因为render调用次数是n+1，每次更新都会重新渲染，所以定时器不适合写在render里面render有个兄弟事件，在组件挂载到实例完成时调用，且只调用一次一个新的错误，组件卸载之后还有数据在更新状态第三步，点击按钮进行定时器清除，防止还在更新组件状态第四步，在react组件将要卸载的时候自动帮忙卸载定时器。生命周期就是在一些关键时间点去做有些事，react生命周期就是在一些关键时间去调用一些特殊函数。react生命周期

非柯里化写法：精简写法（一个参数不用写括号，一行代码不用写花括号）：

onchange调用的等号右边的回调。也就是return xxx 。所以会自动传event参数进去有个记忆法：只要能给onChange绑定函数继续函数柯里化：所以这种也是函数柯里化：

总结：受控组件类似vue里的双向数据绑定。随着输入，直接控制状态。叫受控组件。推荐平时多写受控组件，因为官方也是说尽量少用ref：

理由ref获得表单里面的值记得加上preventDefault不然表单会跳转现用现取的就是非受控组件