如何在react中将类分配给map中的每个第n个div元素？
在React中，可以使用map函数将一个数组中的元素映射为一组React元素。如果要将类分配给map中的每个第n个div元素，可以通过在map函数中添加条件逻辑来实现。
首先，需要将要渲染的数据存储在一个数组中。然后，使用map函数遍历数组，并根据条件给每个第n个div元素分配类。
以下是一个示例代码：
import React from 'react';
class App extends React.Component {
render() {
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const n = 3; // 每第n个div元素
return (
<div>
{data.map((item, index) => {
if ((index + 1) % n === 0) {
return <div className="your-class" key={index}>{item}</div>;
} else {
return <div key={index}>{item}</div>;
}
})}
</div>
);
}
}
export default App;在上述代码中，我们定义了一个数组data，并设置了每第n个div元素的条件为n = 3。在map函数中，我们使用了条件逻辑来判断当前元素是否为第n个元素，如果是，则给该div元素添加了一个类名your-class，否则不添加类名。
请注意，上述示例中的类名your-class仅为示意，您可以根据实际需求自行定义类名。
这样，当React渲染组件时，会根据条件给每个第n个div元素分配类名，从而实现在React中将类分配给map中的每个第n个div元素的效果。
关于React的更多信息和学习资源，您可以参考腾讯云的React产品介绍页面：React - 腾讯云
相关·内容
如何在react中将类分配给map中的每个第n个div元素？下面是我的代码：
const users = [{name: 'Max'},
{name: 'Pete'},
{name: 'Ben'},
{name: 'Bruce'}];
return ({users.map(({name})=>{
return (
<div className="users">{name}</div&
浏览 17提问于2021-05-28得票数 0
回答已采纳
2回答
我试图获取新闻API，但是我一直在获取这个错误，TypeError: Cannot read properties of undefined (reading 'map')，有什么语法吗，还是需要添加什么？请帮我处理这个。
import React, { Component } from 'react'
import NewsItem from './NewsItem'
export default class News extends Component {
constructor(){
super();
thi
浏览 6提问于2022-08-21得票数 1
回答已采纳
我需要在文档App.js中显示数组中的title对象。当我使用一个不带任何对象的数组时，一切都能正常工作： (之前) App.js： import React from 'react'
import TodoList from './Todo/TodoList'
function App(props) {
const mass = [
"text1",
"text2",
"text3"
]
return (
<div className='w
浏览 17提问于2021-06-23得票数 1
回答已采纳
我正在尝试抽象我的代码，下面的结构中有以下两个文件
main.js
components
- parent.js
main.js
require('./components/Parent');
ReactDOM.render(
<Parent />,
document.getElementById('content')
);
组件/Parent.js
var Parent = React.createClass({
displayName: 'Parent',
render: function(){
浏览 0提问于2015-12-22得票数 1
回答已采纳
我是ReactJS的新手，我正在学习一个教程，我为一个有一些图片和相关文本的视频列表创建了一个无状态组件。
错误是：
第9行:期望一个赋值或函数调用，而不是看到一个表达式没有未使用的表达式。
其构成部分是：
import React from 'react';
import styles from './VideoList.css'
import { Link } from 'react-router-dom'
import CardInfo from '../CardInfo/CardInfo'
const Vide
浏览 0提问于2019-03-24得票数 0
回答已采纳
2回答
从多个React组件访问对象
、、、、
我有一个MapboxMap React组件，它初始化并呈现一个Mapbox映射(在map const下)，并且需要在其中呈现MapMarker组件。
这就是MapboxMap的样子：
import React from 'react'
import ReactDOM from 'react-dom'
import MapMarker from './MapMarker'
const MapboxMap = React.createClass({
componentDidMount(argument) {
mapboxgl.acce
浏览 4提问于2015-12-17得票数 0
回答已采纳
1回答
我试图在页面上显示一组新闻文章，但得到了一个错误：
Unhandled Rejection (TypeError): this.state.newsPost.map is not a function
这是我正在运行的代码：
import React, { Component } from 'react'
import { Container, Row, Col } from 'bootstrap-4-react';
import News from '../Articles/News';
import Post from '
浏览 0提问于2021-03-29得票数 0
我正在做一个简单的列表制造者，使用create来做列表应用程序，而且我很难弄清楚这个功能。我用这个应用程序想要做的是：
我希望能够输入文本到一个输入，按下按钮或按回车，和任何文本将列出在应用程序的主体。
我希望能够创建一个按钮，该按钮将在任务或目标完成后删除列表项。
到目前为止，我的代码被分解为以下组件：
App，ListInput，ItemList，项目
应用程序的代码是
import React, { Component } from 'react';
import './App.css';
import Navigation from &#
浏览 0提问于2018-09-30得票数 3
回答已采纳
我在React渲染中遇到了持续的问题。
这段代码
/** @jsx React.DOM */
var AnswerRows = React.createClass({
componentDidMount: function() {
},
render: function() {
{this.props.answers.map(function(answer, i) {
return (
<div id="answerRow">
<label className="AnswerText&
浏览 1提问于2014-10-18得票数 9
回答已采纳
5回答
我对ReactJs并不熟悉，我遇到的问题是数组值没有显示在主体上。
class App extends React.Component{
render(){
let arr = ["one", "two"]
arr.map(n => <Append val={n}/>)
return
<div></div>
}
}
class Append extends React.Component{
render(){
return(
<div>
浏览 6提问于2017-07-22得票数 6
回答已采纳
2回答
我正在构建一个带有React的国际象棋棋盘，我的棋盘网格都有一个2d数组，如下所示：
let board = [
['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'],
['pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', &
浏览 5提问于2022-07-18得票数 -1
回答已采纳
第一次问一个问题，所以请赤裸裸的与不良的格式。
我很抱歉每个人都是为了最初的职位而来的。这是一个简单的问题形式。
import { add, format } from "date-fns";
import React from "react";
function TasksPage() {
const daysArray = Array(10)
.fill()
.map((_, idx) => add(new Date(), { days: idx }));
return (
<d
浏览 2提问于2022-04-11得票数 -1
回答已采纳
1回答
我有下面的python函数，但是我对第2行(q，r= 0，n)感到困惑。
1 def div3(n):
2 q, r = 0, n
3 while r >= 3:
4 q, r = q+1, r-3
5 return q
div3(6)
如果我在第二行执行时运行函数，我得到了r=6、n=6和q=0，为什么会这样？我认为当函数第一次运行时，在执行第二行时，值应该是r=0、q=6和n=6？这与q，r和n用逗号分隔的方式有关吗？
浏览 19提问于2020-11-18得票数 1
回答已采纳
我正在尝试使用react为我的测试应用程序创建。
我在我的一个类的JSX中得到了下面的编译错误。是因为不允许我在JSX中的{}脚本中放置html元素吗？如果是这样的话，如何才能改变它使其工作呢？
./src/components/LeftNav.js
第10行:期望一个赋值或函数调用，而不是看到一个表达式没有未使用的表达式。
第12行:期望一个赋值或函数调用，而不是看到一个表达式没有未使用的表达式。
我得到错误的组件如下所示。
import React, { Component } from 'react';
import LeftNavItem from '
浏览 2提问于2019-10-03得票数 2
回答已采纳
2回答
在react组件中有以下返回：
render() {
return(
<div>
<div className = "category-name">
{categories.map(category =>
<p>{category.name}</p>
)}
</div>
浏览 4提问于2020-04-23得票数 1
回答已采纳
我在React中创建了一个简单的待办事项列表，即使我有一个key属性，我仍然收到错误“列表中的每个孩子都应该有一个唯一的"key”prop。“
这是我的JSX：
<div className="list">
<ul>
{updatedList.map((item, index) => {
return (
<div>
<li key={index}>{item}</li><butto
浏览 0提问于2020-05-07得票数 0
我在一个单独的js文件中有一个包含三个产品的数组：
export const products = [
{
product : 'flash t-shirt',
price : 27.50,
category : 't-shirts',
bestSeller : false,
浏览 0提问于2019-09-18得票数 0
回答已采纳
我正在用React.js编写一个程序，我遇到了让数组正确显示的问题。我尝试过各种"join“语句，但似乎都不起作用。我已经尝试使用split(/\r?\n/)来拆分行。我使用Fetch API调用一个文本文件，然后将内容放入一个数组中，然后将该数组显示在屏幕上。如果有人可以指出为什么它可能不工作，请指出他们！
下面是我的代码：
cats.txt
Persian
Himalayan
Siamese
Sphynx
App.js
import React, { Component } from 'react';
import "Cat" from ".
浏览 0提问于2018-05-21得票数 0
我想用我的React应用程序中某些元素的大小来做一些操作。
我通常要做的是使用refs，但问题是我的元素是在map循环中呈现的，如下所示：
listings.map((listing, index) => <div key={index} className={styles.listing}>listing {index}</div>)
如何检索使用此Array.map呈现的每个元素的大小？
(我需要大小来做一些计算，以便为每个元素得到一个适当的“最大高度”值)。
谢谢你的帮助！
浏览 1提问于2022-11-19得票数 0
回答已采纳
3回答
删除map函数中的重复项
、、、
我正在尝试删除数组中的重复项。我有来自帖子的标签，也是数组：
tags: ['react', 'javascript', 'node']
在map函数中，我得到了如下输出：node react javascript react javascript react javascript node
<div class="tags">
{posts.map(post =>
post.frontmatter.tags.map(tag => (
<Link
key={ta
浏览 3提问于2020-12-31得票数 0
1回答
我是一个新的反应和有一个奇怪的问题。我已经定义了一个无状态函数，当我想要将它导入到我的主组件中时，它不会加载该函数。我猜有一个我不知道的命名惯例。npm没有给出任何错误，所以我假设代码正在编译ok。
我的无状态组件在下面
import React from 'react';
const AppHeader = () => {
return(
<div class="jumbotron text-center">
<h1>Map Search</h1>
浏览 1提问于2019-06-15得票数 1
我一直在尝试获取我设置到本地存储中的JSON数据的值。然后，我尝试使用一个APP.js函数从Food.js文件中访问这个数据(处于.map状态)。返回的值仅在APP.js中处于警告状态，即对象对象、对象对象、对象对象，然后它表示.map不是一个函数。WOuld你们知道怎么回事吗？
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Food from './Food.js'
浏览 4提问于2018-02-14得票数 2
回答已采纳
当前，图像幻灯片库允许通过单击箭头按钮来查看上一张或下一张图片来浏览图像。
有没有办法使它成为一个随机图像加载每次网站是访问？例如，网站将从第2页或第3页开始，而不是总是从第1页开始。
这里是HTML、CSS和javascript。
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade"&g
浏览 3提问于2021-11-11得票数 0
回答已采纳
let numbers = [1, 5, 6, 12, 52, 25];
let state: list((int, bool)) = numbers |> List.map(n => (n, false));
state |> List.map((n, b) => <NumberCard number=n pick
浏览 13提问于2020-04-01得票数 3
1回答
我一直在处理React钩子useRef()的一些问题，我想这是因为我还没有真正掌握它的概念和功能。
我知道它可以用作一个“全局”变量，它存在于函数的作用域之外。所以下面的计数器工作得很好。我只需要强制更新它，因为更改myCounter.current属性本身并不会触发重发器。
const { useState, useRef } = React;
function App() {
const myCounter = useRef(0);
const [forceUpdate,setForceUpdate] = useState(true);
const handleC
浏览 0提问于2019-04-04得票数 4
回答已采纳
在父组件中排序后，列表不会更新。
/**
* Shop List
*/
import React, { useEffect, useState } from 'react';
import { NavLink } from 'react-router-dom';
import { Helmet } from 'react-helmet';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { GetShopList } from &
浏览 3提问于2020-11-11得票数 0
回答已采纳
我正在尝试使用map函数从JSON文件中获取数据，但是我一直得到这个错误：‘列表中的每个子元素都应该有一个唯一的“键”支柱’，即使我设置了key={facts.id}。请问我怎样才能消除这个错误？其他的一切都很正常。
import React from "react";
import ResponsiveAppBar from "./ResponsiveAppBar";
import Typography from "@mui/material/Typography";
import { styled } from "@mui/mater
浏览 5提问于2022-04-26得票数 0
回答已采纳
如何在xpath中获取以下信息？
Text 01 - link_1.com
文本02 - link_2.com
$page = '
<div class="news">
<div class="content">
<div>
<span class="title">Text 01</span>
<span class="link">link_1.com</span>
</div>
</div
浏览 2提问于2012-07-13得票数 2
回答已采纳
我有类似于字符的数组数据
var charArray='a‘、'b’、'c‘、'd’、'e‘、'f’、'g‘、'h’、'i‘、'j’、'k‘、'l’、'm‘、'n’、'o‘、'p'；
想要生成4X4的矩阵表，
在javascript中，我将实现以下结果
var charArray=['a','b','c','d','e','f','g',&#
浏览 3提问于2020-01-25得票数 0
回答已采纳
我熟悉React及其事件系统，但我似乎无法让onKeyPress事件触发<canvas>元素。事实上，我也不能让它在<div>上开火。
这是相关代码
class MyComponent extends React.Component {
render() {
return (
<canvas onKeyPress={() => console.log('fired')} />
)
}
}
如果我将<canvas>更改为<input>，但对&l
浏览 2提问于2015-10-14得票数 5
回答已采纳
(发送todo作为toDo -我认为问题在这里，但不知道解决办法)
todos.js文件
import React from 'react'
import {Todo} from './todo';
export const Todos = (props) => {
return (
<div className='container'>
<h3>Todo List</h3>
{props.toDos.map((todo) => {
return
浏览 3提问于2022-02-26得票数 -1
如何在react const中添加css第n个子元素。现在，它在css样式表中，但我想将其包含在js文件中。<FaBeer>是react图标。
react：
const defaultStyles = {
color: "green"
}
const beerStyling = () => {
return(
<div>
<span> <FaBeer /> </span>
<span> <FaBeer /> </span>
浏览 11提问于2018-08-14得票数 0
3回答
通过执行以下操作，我尝试在react组件中的单独行上显示字符串数组：
<div>
{this.props.notifications.join('\n')}
</div>
然而，这似乎不起作用。this.props.notifications是我想要在div中呈现的字符串数组。有人知道我该怎么解决这个问题吗？
浏览 0提问于2018-01-12得票数 2
回答已采纳
2回答
我正在使用react应用程序。我从获取了一个数据。在该api中，一个字符串中的成分，但除以\n1。当我获取数据时，它就像这一个字符串，而\n1则显示为(, divided)。我想把成分放在ul li元素或者和comma-a后面。我尝试了很多方法来分割数据，并且尝试在每个单词后面添加一个逗号，但是它不起作用。我在中共享了我的代码。
这是我的代码
import React, { useEffect } from "react";
import "./styles.css";
export default function App() {
const [stat
浏览 5提问于2020-10-06得票数 0
Vscode给我看：
Binding element 'id' implicitly has an 'any' type.ts(7031)
这个问题涉及到第30行: const path= posts.map(({ id }) => ({ params：{ id：${id} }))；
贝娄代码：
import React from "react";
import axios from "axios";
import { GetStaticProps } from "next";
export default
浏览 9提问于2022-06-29得票数 -1
1回答
了解选择器第n行
、、、、
我使用TestCafe工作室来记录一些测试。但是，如果您要更改某些列表的结构，则这些测试非常有用。我尝试在Java Script中对选择器进行一些优化，以使测试能够在某些列表中独立运行。但要实现这一点，我还需要理解选择器的“第n”元素。
在我例子中，TestCafe Studio脚本包含：
.click(Selector('div').withText('testcafe#1').nth(9).find('div').nth(2).find('div').nth(1))
请看一下页面树。我不明白“第n(9)”元素是什么意
浏览 0提问于2019-09-08得票数 2
我对编程很陌生，开始做我发现的练习。
我一直在尝试构建这个，但是不，我一直收到这个错误，帮助？
未知错误:解析错误:第16行: XJS值应该是表达式或引用的XJS文本(…)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></
浏览 1提问于2016-10-23得票数 2
回答已采纳
在我的情况下，I有3项，在第一项的情况下，它应该只显示第一项，并且不允许用户选择第2项和第3项，但是如果isItFirt = false更高，用户应该可以从列表中进行选择。我编写了最小可重现性示例，如下所示：
import * as React from "react";
import {
Typography,
Button,
Dialog,
Box,
Select,
InputLabel,
FormControl,
MenuItem,
SelectChangeEvent
} from "@mui/material";
e
浏览 9提问于2022-09-23得票数 0
回答已采纳
我正在犯错误：
警告:数组或迭代器中的每个子元素都应该有一个唯一的“键”支柱。有人能帮我把钥匙放在哪里吗？
nav组件代码：
var React = require('React');
var $ = require('jquery');
var Menubar = React.createClass({
getInitialState: function() {
return {
items: []
}
},
componentWillMount: function() {
浏览 12提问于2016-10-13得票数 0
回答已采纳
我正在学习react并阅读这段代码： (long.)
我不明白的是这个部分(第53-61行)：
{people.map((person, index) => {
const { id, firstName, email } = person;
return (
<div className='item' key={id}>
<h4>{firstName}</h4>
<p>{email}</p>
</div
浏览 18提问于2022-06-12得票数 0
回答已采纳
Data.Json
{
"countries": [
{
"name": "Australia",
"continent": "Oceania",
"rank": 4,
"id": 1
},
{
"name": "England",
"continent": "Europe",
"rank"
浏览 0提问于2021-09-14得票数 0
1回答
我正在学习一个关于使用Google实现React的在线教程。我一直在努力构建我的地图组件，并且我完全按照它们交付的指示进行了操作。但是，当我试图在浏览器中加载我的页面时，没有显示任何内容，并且存在一些控制台错误，我很难解决这些错误。
下面是我的简单HTML页面
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&
浏览 1提问于2018-02-23得票数 0
在迭代列表和打印元素时一直面临问题。
“反应守则”是：
import React from 'react';
import ReactDOM from 'react-dom';
class NewComponent extends React.Component {
constructor(props){
super(props);
this.state = {myData: []}
}
componentWillMount(){
let data = document.getEleme
浏览 4提问于2017-08-27得票数 0
回答已采纳
class HelloWorld extends React.Component {
render() {
const arr = [{class:"A", students:[{name:'james'},{name:'john'}]},
{class:"B", students:[{name:'janice'},{name:'xena'}]},
{class:"C", students:[]}]
return (
<div>
浏览 2提问于2017-06-09得票数 1
回答已采纳
1回答
我怎么弄到这个：
<li>
<div class='myClass1'>myData1</div>
<div class='myClass2'>myData2</div>
<div class='myClass3'>myData3</div>
<div class='myClass4'>myData4</div>
</li>
从这个代码
var data1 = {"Columns":[{&
浏览 2提问于2015-02-10得票数 0
回答已采纳
4回答
我有一个子组件UploadImage.js和父组件Parent.js。我正在上传一个图像，并希望将文件名的值传递给Parent.js组件。我怎样才能做到呢？
UploadImage.js
import React, { useEffect, useState } from 'react';
import { useDropzone } from 'react-dropzone';
.
.
.
const UploadImage = () => {
const [files, setFiles] = useState([]);
cons
浏览 34提问于2022-11-07得票数 0
回答已采纳
在下面的中，我们有一个<Child />组件，它可以在<div />中呈现，也可以不呈现，具体取决于状态。
import React, { useState, memo } from "react";
const Child = memo(
({ n }) => {
console.log("Re-rendered child");
return <span>Child {n}</span>;
},
() => true
);
export default functio
浏览 3提问于2021-10-23得票数 1
回答已采纳
在Gatsby关于的文档之后，我创建了一个基本菜单，并想看看是否可以向其中添加组件：
gatsby-config.js (剥离)
menuLinks:[
{
name:'home',
icon: 'AiFillHome',
link:'/'
},
{
name:'contact',
icon: 'AiFillHome',
link:'/contact'
}
]
在我尝试将外部menuLinks文件作为模块创建时发
浏览 6提问于2022-03-31得票数 1
回答已采纳
我做了一个新的用户卡，上面有一个加号。我已经做了额外的卡，显示用户名的每一张卡。显示用户名的卡使用.map()方法显示。现在，如果我在.map()函数中插入第1部分代码(见下文)，那么它将显示多个add新用户卡。我的最终目标是显示单个添加新用户卡，并使用.map()显示剩余卡。
第1部分代码：
<div className="item-card add" onClick = {this.addUser} >
<img src={require("../../images/plus.svg")} className="plus-ico
浏览 0提问于2018-05-03得票数 1
回答已采纳
我试图在React中使用ID捕获一个元素，但我做不到。
render() {
//Looping through all menus
let menuOptions = this.props.menuLists.map(menuList => {
return (
<li className="nav-item active" key={menuList.name}>
<a className="nav-link" href={menuList.anchorLink}>
浏览 0提问于2018-12-20得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
