gpt4 book ai didi

javascript - React 中的简单 for 循环需要标识符

转载 作者:行者123 更新时间:2023-12-05 09:10:41 25 4
gpt4 key购买 nike

我是 React 新手,正在尝试实现一个简单的 for 循环,如其他 stackoverflow post 中所示.但是,我似乎无法让它发挥作用。我只想运行该组件 5 次(或任意次数),而不是映射到数组或类似物上。

演示:https://stackblitz.com/edit/react-ekmvak

以这里为例:

index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Test from './test';

class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}

render() {
return (
<div>
for (var i=0; i < 5; i++) {
<Test />
}
</div>
);
}
}

render(<App />, document.getElementById('root'));

测试.js

import React from "react";

export default function Test() {
return (
<p>test</p>
);
}

谁能告诉我哪里出错了?我试图复制其他 stackoverflow 帖子并尝试 test() 也。我仍然收到此错误:

Error in index.js (18:27) Identifier expected.

在此感谢您的帮助。

最佳答案

您正在尝试在 JSX 中使用纯 Javascript。你有正确的想法,但你的语法是错误的。相反,将您的 Javascript 代码(for 循环)移到您的 render() 方法(在 return() 之上)

render() {
let items = []
for (let i = 0; i < 5; i++) {
items.push(<Test key={i} />)
}

return (
<div>
{items}
</div>
);
}

这里有几点需要注意:

  • 被迭代的组件需要一个唯一的 key 属性。在这种情况下,我们可以使用 i
  • 的当前值
  • 元素可以通过用大括号括起来在 JSX 中呈现,如上所示。 { 项目 }

关于javascript - React 中的简单 for 循环需要标识符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61212580/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com