如何使用react条件渲染？

文章/答案/技术大牛

发布

1回答

React AgGrid -基于属性条件的行样式

javascript、reactjs、ag-grid

我为React使用了AgGrid，并且我使用的是类样式的react组件，而不是功能组件。我的目标是基于属性条件渲染cellStyle。然而，当我想渲染它时，它甚至在道具没有加载的情况下渲染。我该如何解决这个问题呢？

浏览 46提问于2021-10-16得票数 1

回答已采纳

2回答

reactjs

我希望在要映射的数据上，如果test.space_above = true，则能够显示网格行间距。 {sortedUnitTestTemplates.map(test =>

浏览 22提问于2020-08-21得票数 0

回答已采纳

1回答

当将卡悬停时播放视频，并在未在响应js中悬停时显示默认图像。

javascript、css、reactjs、typescript

<Card></Card> 我使用了npm包react-hover-video-player，但我不使用外部包来执行此操作。

浏览 4提问于2022-04-11得票数 2

回答已采纳

1回答

react-native:使用条件渲染时的内存

react-native

例如，我有一个视图，在这个视图中，我们有另一个View2，它是有条件地呈现的。那么，如果我将这个View2显示和隐藏1000次，它会影响内存吗？

浏览 24提问于2019-05-01得票数 0

1回答

React Router VS条件渲染

javascript、reactjs、react-router-v4

我对使用React Router和常规的条件渲染方法之间的核心差异(特别是在性能方面)感到困惑。我所指的“常规条件渲染方法”是，例如：我们可以在父组件中设置一个状态，并将其作为子组件的道具传递，我们根据需求有条件地更新这种状态，子组件将根据其道具重新呈现不同的内容。我认为它可以达到与使用React Router完全相同的目的，那么为什么我们还需要React路由器呢？使用react

浏览 2提问于2018-07-05得票数 15

1回答

使用jest和react- Test -library测试正确的SVG组件呈现

reactjs、svg、jestjs、react-testing-library

我在React组件中有一个svg，它可以有条件地呈现。 <div className='avatar'> {gender === true ?最初，我希望MaleAvatar svg渲染，然后如果性别的值被更改为false，FemaleAvatar svg渲染-但是男性头像应该首先渲染，这就是我想测试的。') 我正在使用jest和react-jest library进行测试，但是在父div上使用测试

浏览 22提问于2021-04-12得票数 2

1回答

在条件呈现中ref类型记录返回null

javascript、reactjs、typescript

我想使用React，它在静态渲染中使用精细，例如：但是，在条件呈现中，不是，例如： {footer ?如何在条件渲染中做正确的处理？任何答复都将不胜感激。

浏览 3提问于2017-04-17得票数 0

回答已采纳

1回答

用子组件替换主组件

javascript、reactjs

class ABC extends React.Component { <div className="sidebar"> </div>} render() { <div className="sidebar

浏览 8提问于2019-10-02得票数 0

回答已采纳

1回答

React Native循环此API以显示

javascript、arrays、json、react-native

React-Native如何使用条件渲染循环JSON API我是一个新手，请指导我，谢谢。我的代码：

浏览 1提问于2017-02-18得票数 1

2回答

React:条件渲染

javascript、reactjs、material-design-lite

我有一个react组件，它有条件地呈现，即： if (this.state.isFoo) { return (但对于条件渲染，如示例所示，这些选项是不可选的。下拉列表不会展开，并且选项不可见。是不是因为getmdl-select.min.js在加载时做了一些事情？注意：search按钮激活isFoo，即它将其设置为true，以便请求重新渲染。

浏览 16提问于2018-02-23得票数 0

1回答

react中常见的条件呈现模式

reactjs、react-native、react-hooks

我有四个页面(使用react钩子的功能组件)，在这些页面中，我需要根据某些条件呈现另一个组件。我知道我总是可以做条件渲染。喜欢,返回isValid？component1 : component4；因此，这里的component1 (如果条件为真，我希望在每个页面中呈现)对于所有四个页面都是相同的。我想知道，如果条件为真，是否有其他方法可以呈现component1，而不需要在所有四个页面中编写重复的代码？比如使用高阶组件(HOC)或自定义

浏览 0提问于2020-07-28得票数 1

1回答

使用prop中的字符串导入和显示组件

reactjs、typescript

在state.showModal上找到了我要导入的文件的名称，如何只导入我需要的文件？然后当我开始展示我正在做的这些组件时...<showModal /> 完整的代码片段如下... import { ReactElement } from 'react'; import { LayoutShape } from '..

浏览 25提问于2021-09-24得票数 1

1回答

如何避免在切换视图时对子组件进行额外或不必要的渲染？

javascript、reactjs

如果我有两个父组件，它们根据一个标志有条件地渲染，如果两个父组件共享一个子组件，那么这真的永远不会改变，我如何避免重新渲染该子组件？ Codesandbox。正如您所看到的，我甚至尝试过使用React.memo，但是rendered side仍然打印。

浏览 6提问于2020-07-14得票数 0

回答已采纳

1回答

React条件渲染

reactjs

我正在使用React为我的前端应用程序创建主页。我希望它将用户定向到登录页面，如果他还没有登录，并将他定向到另一个页面，如果他已经登录了。我正在检查浏览器是否知道使用getCurrentUser ()函数的用户。这是我试图在主页上做的事情。 SignIn和Myprofile是我想要呈现的React组件。

浏览 11提问于2020-12-16得票数 1

1回答

生产模式: React中的最小化函数会改变组件函数的名称吗？

reactjs、create-react-app

在我的React项目中，我想渲染一些带有一些道具的组件，这些道具是从一个对象传递过来的(这个对象没有'name‘键！)。在这个组件中，我有一个render-condition，在这个条件中，我比较了在props中传递的组件。在条件中，我链接到组件函数的名称，因为我不想将Component_1导入到ParentComponent。下面是我的代码：);问题:在开发模式下，它

浏览 0提问于2019-08-09得票数 0

2回答

添加挂钩组件时，所呈现的挂钩比上一次渲染时要多

reactjs、react-hooks

当我想要动态更改视图中现有输入的可见性时，我会得到一个错误:渲染的钩子比上次渲染时要多。

浏览 5提问于2019-05-15得票数 8

回答已采纳

1回答

什么时候使用开放属性还是有条件地渲染Material-UI Modal组件？

javascript、reactjs、material-ui

当使用Material-UI的Modal组件(或任何使用它构建的组件)时，使用open属性与有条件地渲染组件相比有什么好处吗？使用open属性的示例： /* code</Modal>使用条件渲染的示例：

浏览 21提问于2021-05-27得票数 2

1回答

将参数传递给另一个组件

reactjs

如何正确地将参数从一个组件传递到另一个组件。在我的场景中，当我通过控制台将pass参数记录到另一个组件时，它们在最后一个组件中的实际字符串之前有一个空字符串。它应该只是实际的字符串。组件1： import {dataComponent} from '.); <div>{<dataComponent callbackfunction={data}/

浏览 9提问于2019-08-02得票数 0

回答已采纳

4回答

如何在React中使用映射内部的条件呈现

javascript、reactjs

我有一个react页面，它提供了一个从GraphQL API返回的产品列表。一旦产品返回，我就将它们存储在一个状态中，然后呈现它们。如何只渲染符合特定条件的产品？现在，我正在对产品进行映射并对每个产品进行渲染。工作正常。但是，如果我尝试使用条件语句，则IDE中会出现错误。这是我目前的代码。/> ))} <&

浏览 9提问于2021-10-31得票数 1

回答已采纳

3回答

React根据状态更改重新呈现条件，而不更改条件

javascript、reactjs

我有一个条件，当某个属性保持为真时，它会显示编辑器。问题是，每次我选择用来填充该编辑器的另一个对象时，用于呈现该编辑器的数据都应该改变。然而，因为负责条件渲染的道具不会改变，即使用来渲染编辑器的数据改变了，它也拒绝在状态改变时重新渲染。{this.state.showEditor ? (<BlockEditor routine={this.stat

浏览 1提问于2019-09-23得票数 1

点击加载更多

React AgGrid -基于属性条件的行样式