问题
我是新来的反应并尝试实现一个简单的for循环，如另一个stackoverflow帖子所示。但是，我似乎无法让它工作。我只想运行组件 5 次（或任意次数），而不是映射到数组或类似的。


例如：

index.js：

1. import React, { Component } from 'react';
   
2. import { render } from 'react-dom';
   
3. import './style.css';
   
4. import Test from './test';
   
5. 
   
6. class App extends Component {
   
7.   constructor() {
   
8.     super();
   
9.     this.state = {
   
10.       name: 'React'
    
11.     };
    
12.   }
    
13. 
    
14.   render() {
    
15.     return (
    
16.       <div>
    
17.         for (var i=0; i < 5; i++) {
    
18.         <Test />
    
19.     }
    
20.       </div>
    
21.     );
    
22.   }
    
23. }
    
24. 
    
25. render(<App />, document.getElementById('root'));

复制代码

测试.js

1. import React from "react";
   
2. 
   
3. export default function Test() {
   
4.   return (
   
5.     <p>test</p>
   
6.   );
   
7. }

复制代码

有人可以告诉我哪里出错了吗？我尝试过复制另一个 stackoverflow 帖子并尝试过 test() 。我仍然收到此错误：

感谢您的帮助。

回答
JSX 将接受任何有效的 JavaScript 表达式、声明式编程和命令式编程，也许这个源代码可以帮助你。您可以创建一个声明性解决方案，正如其他同事所展示的（以及最佳解决方案），但也可以将您的命令式解决方案包装到一个函数或方法中。

1. const Test = () => {
   
2.   return (
   
3.     <p>test</p>
   
4.   );
   
5. }
   
6. 
   
7. class App extends React.Component {
   
8.   constructor() {
   
9.     super();
   
10.     this.state = {
    
11.       name: 'React'
    
12.     };
    
13.   }
    
14. 
    
15.   createElements = () => {
    
16.     const elments = [];
    
17.     for (var i=0; i < 5; i++) {
    
18.       elments.push(<Test />)
    
19.     }
    
20.     return elements;
    
21.   }
    
22. 
    
23.   render() {
    
24.     return (
    
25.       <div>
    
26.         {this.createElements()}
    
27.       </div>
    
28.     );
    
29.   }
    
30. }
    
31. 
    
32. // Render it
    
33. ReactDOM.render(
    
34.   <App />,
    
35.   document.getElementById("react")
    
36. );

复制代码

1. <div id="react"></div>
   
2. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
   
3. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

复制代码

问题
我是新来的反应并尝试实现一个简单的for循环，如另一个stackoverflow帖子所示。但是，我似乎无法让它工作。我只想运行组件 5 次（或任意次数），而不是映射到数组或类似的。


例如：

index.js：

1. import React, { Component } from 'react';
   
2. import { render } from 'react-dom';
   
3. import './style.css';
   
4. import Test from './test';
   
5. 
   
6. class App extends Component {
   
7.   constructor() {
   
8.     super();
   
9.     this.state = {
   
10.       name: 'React'
    
11.     };
    
12.   }
    
13. 
    
14.   render() {
    
15.     return (
    
16.       <div>
    
17.         for (var i=0; i < 5; i++) {
    
18.         <Test />
    
19.     }
    
20.       </div>
    
21.     );
    
22.   }
    
23. }
    
24. 
    
25. render(<App />, document.getElementById('root'));

复制代码

测试.js

1. import React from "react";
   
2. 
   
3. export default function Test() {
   
4.   return (
   
5.     <p>test</p>
   
6.   );
   
7. }

复制代码

有人可以告诉我哪里出错了吗？我尝试过复制另一个 stackoverflow 帖子并尝试过 test() 。我仍然收到此错误：

感谢您的帮助。

回答
JSX 将接受任何有效的 JavaScript 表达式、声明式编程和命令式编程，也许这个源代码可以帮助你。您可以创建一个声明性解决方案，正如其他同事所展示的（以及最佳解决方案），但也可以将您的命令式解决方案包装到一个函数或方法中。

1. const Test = () => {
   
2.   return (
   
3.     <p>test</p>
   
4.   );
   
5. }
   
6. 
   
7. class App extends React.Component {
   
8.   constructor() {
   
9.     super();
   
10.     this.state = {
    
11.       name: 'React'
    
12.     };
    
13.   }
    
14. 
    
15.   createElements = () => {
    
16.     const elments = [];
    
17.     for (var i=0; i < 5; i++) {
    
18.       elments.push(<Test />)
    
19.     }
    
20.     return elements;
    
21.   }
    
22. 
    
23.   render() {
    
24.     return (
    
25.       <div>
    
26.         {this.createElements()}
    
27.       </div>
    
28.     );
    
29.   }
    
30. }
    
31. 
    
32. // Render it
    
33. ReactDOM.render(
    
34.   <App />,
    
35.   document.getElementById("react")
    
36. );

复制代码

1. <div id="react"></div>
   
2. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
   
3. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

复制代码