react-props 相关问题

ReactJS是由facebook开发的JS库。道具是反应组件中使用的变量。在对反应道具的使用有疑问时使用标签。

React 的 ESLint:是否有规则来检测需要 useMemo 的 props?

使用 React,在功能组件返回的 JSX 代码中我可以得到: 我的组件.jsx 或者 通过 React,在功能组件返回的 JSX 代码中我可以得到: MyComponent.jsx <MySubComponent props1={{a: 0, b:1}}/> OR <MySubComponent props2={["toto", "tata"]}/> 我的子组件是通过记忆导出的: MySubComponent.jsx export default React.memo(MySubComponent) 但是这会破坏记忆,因为格式为 {{...}} 或 {[...]} 的 props 每次都会实例化一个新的对象/数组(相同的值,但不同的内存地址) ,因此 React.memo 的 propsshallow-compare 看到它不同。 有没有 ESLint/JSLint 规则来检测这些类型的 props ? 您可以使用 useMemo 来记忆对象或数组并将其作为 props 传递给 MySubComponent,如下所示: const obj = React.useMemo(() => ({a: 0, b:1}), []); <MySubComponent props1={obj}/> 在 SubComponent.jsx 中 export default React.memo(MySubComponent); 这只适用于简单的对象。 由于您已经知道该问题,因此不需要 eslint 来识别它,除非这是一个重复的模式。看来你已经过了发现阶段了。 我建议选择以下两个选项之一: 使用自定义函数覆盖 React.memo(Component, isEqual) 的第二个参数,您可以在其中按值比较输入数组或对象,因此只要内容保持不变,更改 prop 引用就变得无关紧要。但是,如果您广泛地重新渲染该组件,这可能会成为一种开销。 您的另一个选择是在组件外部定义数组和对象,并继续传递修改后的内容,但保持引用相同。 是的,存在一个插件:eslint-plugin-react-perf -> https://www.npmjs.com/package/eslint-plugin-react-perf

回答 3 投票 0

在 React 中将 Tailwind 类作为 prop 传递

我正在创建一个可重用的组件按钮,我想向其传递两个 Tailwind 类作为道具并动态使用它们。 这是我的组件: 函数按钮({主要,次要,标签,onClick }...

回答 2 投票 0

为什么使用 StyleProp<ViewStyle> 而不是 ViewStyle?

我正在查看一些 React Native Typescript 代码,并看到组件采用了 style props。 它们的类型为 StyleProp。但这种类型给我带来了问题,比如不能……

回答 1 投票 0

如何从组件属性推断类型?

我希望从initialValue prop 推断出FormValueType 类型。似乎很容易而且可能,但我不知道该怎么做。如果你能让我转向正确的方向,它就可以......

回答 1 投票 0

如何从组件属性推断类型? [打字稿,反应]

我希望从initialValue prop 推断出FormValueType 类型。似乎很容易而且可能,但我不知道该怎么做。如果你能让我转向正确的方向,它就可以......

回答 1 投票 0

React:道具未定义,即使它们应该是

我的子类中的 props 应该是 Event 对象的数组。 我事先检查 App.js 中的数组是否为空,如下所示: 函数应用程序(){ 类事件{ 构造函数(id,

回答 2 投票 0

重新渲染默认保持旧状态

我有一个 React Typescript 应用程序,其中有一些问题对象。当我单击按钮时,我会打乱现有的 FilteredQuestions 状态数组,但是列表中的 Question 组件呈现确实...

回答 1 投票 0

React Props 缺少验证

在使用 React 的 props 时,我的代码中有以下“警告”。一切似乎都工作正常,但是,我的道具上有红色下划线,当我将它们悬停时,我有这个......

回答 1 投票 0

尝试使用 React Router 在 React 中传递 props - 说该值为 null

我正在尝试传递 props 以便使用 React Router 作为我所在项目的一部分。我不断从这段代码中收到链接为空的错误,我不确定为什么 - 标头组件: [![咳...

回答 1 投票 0

如何修复“道具验证 eslint React/prop-types 中缺少”错误?

'name' 在 props 验证中丢失 eslint react/prop-types 道具验证 eslint React/prop-types 中缺少“描述” 导出默认函数 Note({name,description}) { 返回 ( ...

回答 2 投票 0

我想做模态组件与类组件反应,但似乎状态没有更新。需要指导我的帮助)

问题:商店从数据库获取项目,主组件用简短信息呈现这些项目。单击后,我想打开模态组件,其中包含有关该产品的详细信息。 我的想法 -> 创建变量...

回答 1 投票 0

导入中使用State

当我在 App.js 中使用 useState 时,出现错误,提示“无法在顶层使用 useState”。 我在 src 文件夹中创建了一个名为 Box.js 的组件,其中包含一个包含 6 个对象的数组,每个对象带有...

回答 1 投票 0

子组件中的道具为空,直到我刷新父组件[重复]

我有一个正在运行的应用程序,道具没有任何问题,除非我必须在将这些变量发送到子组件之前对其进行过滤。这是我的父组件: 导入 React, { useState, useEffec...

回答 2 投票 0

React - 渲染对象数组时,对象作为 React 子对象无效

编辑: 我在 React 项目中遇到一个问题,我尝试使用 map 函数渲染对象数组,并且收到以下错误:对象作为 React 子项无效 (

回答 1 投票 0

ReactJS |子组件中的道具为空,直到我刷新父组件

我有一个正在运行的应用程序,道具没有任何问题,除非我必须在将这些变量发送到子组件之前对其进行过滤。这是我的父组件: 导入 React, { useState, useEffec...

回答 2 投票 0

如果道具编号为 1 或 0,如何让我的道具值显示“正在导入”或“当前”?

我正在尝试获取此属性(状态),其值为 1 或 0,以显示“正在导入”或“当前”,而不是仅显示 1 或 0。 因为我不是...

回答 1 投票 0

传递给子级的useState变量未注册为函数

在 React Native 应用程序上工作,收到此错误: 警告可能的未处理的承诺拒绝(id:1):TypeError:setAuthenticated不是一个函数(它是未定义的) 这是我的 AuthPage ...

回答 1 投票 0

React.useState 单击时值没有改变

从“react”导入React 导出默认函数 App() { 让 [isGoingOut, setisGoingOut] = React.useState("是") 函数改变状态(){ setisGoingOut(prevValu...

回答 1 投票 0

如何将 prop 从子组件传递到父组件?

我有一个 updateServerStatusModal 组件,正在servers.js 组件中使用。我试图将 prop 从 updateServerStatusModal 组件传递到服务器组件,但它确实...

回答 1 投票 0

错误:组件 [ComponentName] 声明了 `PropTypes` 而不是 `propTypes`。您是否拼错了属性分配?

有人可以解释为什么我在导入 PropTypes 时收到此错误: 组件 CustomBackground 声明了 PropTypes 而不是 propTypes。您是否拼错了属性分配? 自定义背景.js:

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.