ReactJS中的条件函数组件渲染

文章/答案/技术大牛

发布

2回答

只呈现一次组件的逻辑

javascript、css、reactjs

我需要帮助为我的React组件创建一个逻辑。如果分隔线在页面上出现一次，则不应再次呈现它。这是我的代码：const Divider = () => ( <hr className="div

浏览 2提问于2020-02-10得票数 0

1回答

reactjs

我有以下代码： my code 我想要的是当"load“为true时返回： <div className="App"> <h1>Hello CodeSandbox<

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

回答已采纳

2回答

如何在react +类型标本语中有条件地呈现成分

javascript、reactjs、typescript、ecmascript-6

更新import React, { FunctionComponent } from 'react'; ) => ( <h3>{name}</h3> </div>当我只对组件

浏览 3提问于2020-05-27得票数 0

1回答

ReactJS -在组件中测试条件渲染

reactjs、jestjs、react-testing-library

我有一个组件，它使用useEffect从文件中获取数据。在组件中，我有一个条件，如果我们有数据，它只显示组件的内容。现在如何在我的测试用例中测试内容的条件部分？这就是我现在所拥有的：组件： function MunicipalityInfo() { const [municipalityData, setMunicipalityData] = useStatemunicip

浏览 22提问于2021-07-05得票数 1

3回答

我有一个帖子列表，我试图在每个帖子的构造器或componentDidMount中调用一个操作。但不知何故，当我发送一个新消息时，构造器和componentDidMount函数被调用了两次。this.props.actions.action1(); this.props.actions.action2();} 这些函数仅在从列表中读取帖子时调用一次我试着像这样使用componendDidUpdate函数</

浏览 187提问于2019-03-12得票数 8

1回答

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

reactjs、typescript

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

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

1回答

Reactjs中基于多个条件的组件渲染

javascript、reactjs、higher-order-functions、higher-order-components、conditional-rendering

我需要改进渲染逻辑，以避免混淆多个三元操作符。做这件事的最好方法是什么。在这里，我正在寻找一种使用特殊模式进行条件渲染的方法。请提供建议。 firstCondition ?

浏览 16提问于2022-07-09得票数 0

1回答

如何构建可以改变视图类型react组件

reactjs

我正在工作的reactjs项目需要建立一个可以改变视图类型的组件。Like:组件有"view as icon“和"view as list"，并且有一个按钮可以相互切换。最好的办法就是把它归档。谢谢编辑:很抱歉把你弄糊涂了，这正是我想要的。如你所见，我有一个mediaComponent，我希望它能以两种不同的方式显示:列表和缩略图。那么我该如何使用react来做到这一点呢？p/s:我尝试过条件

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

0回答

如何使用typescript (tsx)在一个DIV中呈现多个reactjs元素？

reactjs、typescript、render、react-jsx

参考下面的代码，我需要在同一个容器下渲染3个元素/组件。并且下面的代码没有呈现任何内容。所以我不确定正确的方法是什么？ ReactDOM.render([<HelloComponent class="welcome&

浏览 5提问于2016-06-29得票数 1

1回答

React Native中的屏幕刷新问题

react-native、react-navigation

我正在制作一个使用firestore的应用程序。每当firestore中的数据发生更改时，我的屏幕上都会显示两组数据，一组包含更改前的数据，另一组显示更改后的数据。

浏览 17提问于2020-12-25得票数 0

1回答

具有基于状态/属性值的受控呈现的React Hooks函数组件

reactjs、react-hooks

能够在React类组件上使用shouldComponentUpdate的好处之一是能够根据条件控制渲染，而不仅仅是状态/prop值的更改。在函数组件中使用react钩子进行优化的首选方法是什么？在下面的示例中，如果类组件处于关闭状态(或处于关闭状态)，即使它有新的子级，它也不会重新呈现。this.props.children : null} </div&g

浏览 16提问于2019-03-14得票数 0

回答已采纳

2回答

在React.js中有条件地呈现不同元素

reactjs

我有一个名为JourneyTripComponent的react组件。我想在一个页面中使用它，在这个页面中，我不想呈现这个组件中的Row元素。/CustomColumn> </CustomColumn> </Container> 我想用subHeader来渲染行我知道我需要为我<em

浏览 10提问于2019-03-29得票数 0

回答已采纳

1回答

将子组件添加到React Native中的组件

react-native、components、state

在我的代码中的某处，我使用.map函数创建一个组件数组，并用这些组件更新状态。然后在ListItems ()函数中呈现返回。我的问题是，我以后如何向组件添加子组件？与下面的代码一样，“Badge”组件最初需要存在，但后来添加，以显示有来自此用户的新的未读消息。该怎么做呢？ListItem.Title> </Lis

浏览 8提问于2020-12-29得票数 0

2回答

两个子组件之间的通信，而不会导致在父组件中完全重新呈现

reactjs

我一直在学习和使用ReactJS。在阅读了大量的帖子和博客后，我仍然对在ReactJS中的组件之间进行有效的通信感到困惑。假设我有一个父组件"a"，它有许多子组件"A“，"b"，"c"，"d"，"e”等等。现在在"a“组件中发生了一些事情，我想重新呈现"b”组件。由于"a

浏览 1提问于2016-07-08得票数 1

1回答

不同的是，在mobx中，当可观测变量被更新时，在作用方法和普通函数中？

javascript、reactjs、mobx、mobx-react

我正在使用MBOX进行ReactJS中的状态管理。我有时更新某些函数中的可观察变量，而不是重新呈现react组件，有时我使用@action方法更新可观察变量。那么，这两种场景之间的区别是什么，以及它将对渲染产生什么影响？

浏览 2提问于2017-06-01得票数 4

3回答

如何在ReactJS中编写隐藏容器的点击事件？

jquery、reactjs

".b2“是按钮的类名。"#subscribe“是div空容器的id。单击该按钮时，jquery会隐藏div容器。如何将其转换为reactjs？

浏览 12提问于2019-01-15得票数 0

回答已采纳

1回答

我应该为我的React js应用程序将我的多个css文件压缩成一个吗？

javascript、html、css、reactjs

我对reactjs还很陌生。现在，我的reactjs应用程序非常大，有许多页面，每个大组件都有五个不同的CSS文件，我使用react-helmet为不同的组件使用CSS。我是否必须将css压缩到一个文件中，或者我的方法是正确的？我还使用reactjs来渲染客户端和服务器端。

浏览 0提问于2016-10-29得票数 0

1回答

Reactjs预加载嵌入式内容

javascript、reactjs

我在一个使用ReactJs的一页网站上工作。网站的不同部分被创建为react组件，并基于用户在导航栏中选择的选项卡有条件地呈现。我以react youtube播放器和一些嵌入式bandcamp播放器的形式包含了嵌入式内容。现在，每当我渲染它们的父组件时，它们都会重新加载。在打开站点时加载此内容，并在必要时使其可见的最佳方式是什么？

浏览 0提问于2017-06-01得票数 0

2回答

无限循环中的react- isActive -dom setState

javascript、reactjs

我创建了一段代码，使图标根据呈现的页面而有所不同，但在setState部件中发生了无限循环。帮帮我。

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

2回答

获取react.js上下文中html元素的数据属性

javascript、jquery、reactjs

CMS将一个变量作为data-rest-url属性传递给React.js应用程序：如果我将jQuery添加到我的React.js应用程序中，那么我可以简单地： const $reactRoot = $('#reactjs-root如何将一些变量

浏览 24提问于2017-03-14得票数 10

回答已采纳

点击加载更多

只呈现一次组件的逻辑