如何在map react中设置if语句？

在React中，可以使用条件语句来根据特定条件渲染不同的内容。在Map函数中使用条件语句，可以通过在回调函数中使用if语句来实现。

以下是在Map React中设置if语句的示例：

import React from 'react';

function App() {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <div>
      {numbers.map((number) => {
        if (number % 2 === 0) {
          return <p key={number}>Even number: {number}</p>;
        } else {
          return <p key={number}>Odd number: {number}</p>;
        }
      })}
    </div>
  );
}

export default App;

在上面的示例中，我们使用了一个数组numbers，然后使用map函数遍历数组中的每个元素。在回调函数中，我们使用if语句来判断每个数字是奇数还是偶数，并根据条件返回不同的<p>元素。

需要注意的是，每个动态生成的元素都需要设置一个唯一的key属性，以帮助React进行元素的识别和更新。

这是一个简单的示例，你可以根据具体的需求和条件编写更复杂的if语句来控制渲染的内容。

关于React的更多信息和学习资源，你可以参考腾讯云的React产品介绍页面：React产品介绍。

如何在map react中设置if语句？

react-native

我通过API获取数据，并在render中检查它是否已加载，并尝试返回此部分的数据，但在这方面遇到了困难。agents-section"> {agent.map

浏览 15提问于2020-05-11得票数 0

0回答

React Native:在react-native-maps中设置UserLocation样式

react-native、react-native-maps

如何在React原生地图上设置‍UserLocation的样式 region={this.props.coordinate} ></MapView>{ to

浏览 7提问于2018-07-16得票数 2

回答已采纳

4回答

map地图项目什么也没有显示

reactjs

import React from 'react'; const test=["1","2"]; test.map((item)=>{ return

浏览 6提问于2022-06-17得票数 0

回答已采纳

2回答

react .map函数中If语句

reactjs、function、dictionary、conditional

我有这样的代码： const listItems = ( {desclist.map((point, index) => if (point.length

浏览 128提问于2019-02-28得票数 0

回答已采纳

1回答

VIM:如何设置quickfix窗口的窗口大小？

dictionary、vim、window、size

我在我的~/..vimrc中设置了打开quickfix窗口的热键，如下所示：(1)它工作，但窗口大小太窄，如何在同一"map“语句中将qfix窗口大小设置为60？我不想在后面输入额外的命令map <F10> copen 默认情况下，quickfix窗口的高度为10行。如何在相同的"<em

浏览 3提问于2017-02-14得票数 2

回答已采纳

4回答

如何在react中的map中编写if语句？

reactjs

我正在尝试写一个if语句，如果邀请不是未定义的。下面是我的代码库： {tabs[activeTab] === "Pending" && {user.invited.pending

浏览 141提问于2021-04-22得票数 0

回答已采纳

2回答

在初始渲染后对方位角进行反应原生贴图动画

react-native、react-native-maps

我试图在组件第一次呈现后立即调用map上的方法。在这种情况下，this.map是未定义的，但是它不应该由ref设置吗？如何在componentDidMount方法中获得对MapView的引用？import React from 'react'; export default class Map extends React.Comp

浏览 0提问于2017-10-08得票数 0

1回答

React google - maps react，从google maps更改隐藏div的属性

javascript、html、css、reactjs、google-maps

因此，我使用google- maps react库渲染一些地图。然而，我对google地图组件产生的最外在的div有一个问题。我不希望div比它的父div大，但它默认设置为100% width+height以及位置绝对值(所以oveflow:hidden不起作用)。它也没有id或类名，因此我不能直接获取div。下面是我如何在一个react方法的return语句中拥有Map的代码。样式更改会影响最外层div下的div，而不是我需要更改的div。<Map google

浏览 2提问于2017-11-04得票数 1

2回答

从多个React组件访问对象

javascript、reactjs、javascript-objects、javascriptmvc、mapbox-gl-js

我有一个MapboxMap React组件，它初始化并呈现一个Mapbox映射(在map const下)，并且需要在其中呈现MapMarker组件。这就是MapboxMap的样子：import ReactDOM from 'react-dom' // This is what

浏览 4提问于2015-12-17得票数 0

回答已采纳

2回答

REACT.JS:如何遍历所有NavBar按钮并移除它们的类，并将“活动”类添加到所单击的按钮中

reactjs、ecmascript-6、react-state-management

我设法在单击的元素上创建了一个将"active“切换为true的状态，然后在className属性中执行If语句： className={this.state.active ?"nav-item nav-link active" : "nav-item nav-link"} 下面是完整的代码： import React, { Component } from 'react';<div></div>

浏览 27提问于2019-06-23得票数 4

回答已采纳

1回答

如何在React js中传入select input的值中的html标签？

javascript、html、reactjs

我试图映射select标记的输入字段中的值，但由于某种原因，它给出了[Object object]。当我没有在map语句的返回中传递另一个标记时，输出是正常的。使用的react钩子是：返回语句为：e => setCategories([...categories, e.target.value])}

浏览 3提问于2020-10-14得票数 0

3回答

如何使用ReactJS动态生成DOM元素？

reactjs

我有包含以下值的数组：如何在ReactJS中使用forEach或map迭代器在DOM中动态生成这些元素？

浏览 1提问于2017-11-16得票数 5

1回答

如何在react functional component中切换按钮变量的className？

javascript、reactjs、typescript、openlayers

我有一个react功能组件，它将一个按钮作为变量，并在单击时启动一个函数。按钮是一个变量，因为此函数将导入到另一个功能组件中，并且按钮是在此外部函数中创建的。在我的示例中，我使用useState钩子来设置类的默认值，然后在单击函数中，我根据另一个useState钩子的值更改类的值。这不会显示该按钮的任何类。我还尝试在return语句中设置类，如：<button className={btnActive ?'one_cl

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

1回答

React Render中的不变冲突或在React中迭代和返回的正确方式

javascript、reactjs、react-jsx

我在React渲染中遇到了持续的问题。这段代码var AnswerRows = React.createClass({ }, {this.props.answers.map(function(answer, i) { <div但是，每次都可以这样做： /*

浏览 1提问于2014-10-18得票数 9

回答已采纳

2回答

向子组件发送请求的最佳方式

javascript、reactjs

我正在创建一个地图应用程序，它由一个显示GeoJSON标记的地图(react- map -gl)和一个列出相同标记属性的简单表组成。map组件和table组件都是公共组件(主App组件)的直接子组件。单击表中的标记时，我希望地图组件缩放到此标记。为了让地图开始一个转换，我需要设置它的state.viewport，如本例所示：https://visgl.github.io/react-map-gl/docs

浏览 39提问于2020-12-14得票数 0

回答已采纳

1回答

使用@测试的单元测试分支覆盖率(100%)-库/反应(反应-测试-库)

reactjs、unit-testing、react-testing-library、testing-library

如何在单元测试中覆盖所有分支(100%)，使用@ testing /react(React React Library)。下面是一些场景N= getNum()；if( num %2 === 0){语句}{声明.}const onDateSelectorChange = (elem，value) => {语句

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

1回答

从React的返回方法内的数组中移除元素

javascript、reactjs、ecmascript-6

有一个React组件，它通过props接收一些值： render() { values,shouldRemove, } }因此，如果shouldRemove存在于values数组中，我

浏览 2提问于2020-06-09得票数 0

1回答

onChange函数不能在具有react rails的erb中的react组件中工作

ruby-on-rails、reactjs、react-rails

import React from "react" console.log('change was made'); const allData = this.state.all_cards.map("cardlist", { all_ca

浏览 5提问于2020-09-17得票数 0

回答已采纳

2回答

如何在ReactJS条件语句中追加另一个字段？

reactjs

我想在条件语句中在record.customerName和record.customerGender之间添加一个record.customerGender标记，但是它给我的是<br/>而不是真正的休息？我如何在两个护盾之间附加一个中断？谢谢return(<React.Fragment>{record._id == items._id?record.customerName + '<br/>&#x

浏览 1提问于2022-03-03得票数 1

回答已采纳

1回答