React 中的简单 for 循环需要标识符
问题我是新来的反应并尝试实现一个简单的for循环，如另一个stackoverflow帖子所示。但是，我似乎无法让它工作。我只想运行组件 5 次（或任意次数），而不是映射到数组或类似的。
例如：
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() 。我仍然收到此错误：
感谢您的帮助。
回答
JSX 将接受任何有效的 JavaScript 表达式、声明式编程和命令式编程，也许这个源代码可以帮助你。您可以创建一个声明性解决方案，正如其他同事所展示的（以及最佳解决方案），但也可以将您的命令式解决方案包装到一个函数或方法中。
const Test = () => {
return (
<p>test</p>
);
}
class App extends React.Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
createElements = () => {
const elments = [];
for (var i=0; i < 5; i++) {
elments.push(<Test />)
}
return elements;
}
render() {
return (
<div>
{this.createElements()}
</div>
);
}
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("react")
);
<div id="react"></div>
<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"></script>
页:
[1]