Question

我正在尝试创建一个简单的文本淡入淡出功能-我正在从数组中输出文本，我想按顺序淡入淡出文本，例如-'Red'，'Green'，'Blue'，等等。我希望这个循环继续进行。

我想我可能可以通过for循环做到这一点，并循环遍历添加和删除渐变类的元素。

在我的演示中，我只是想让循环在返回中起作用，但不会成功

如何在React中使用for循环。

或者有更好的方法做到这一点。

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {

  const colors = [
    'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
  ]

  return (
    <div className='titles'>
      {colors.map((color, i) => (
        <p key={i} className={'title-'+i}>{color}</p>
      ))}
    </div>

    {this.loopFun()}

  );

  const loopFun = () => {
      for(let i=0; i<colors.length; i++){
      console.log(colors[i])
    }
  }
}

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

Answer 1

您的代码中有几个问题：

您需要在return语句之前定义函数
您不能混合使用类和函数语法（不要使用此语法。）
您需要在div或其他元素内包装函数以换取

一个有效的示例如下：

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {

  const colors = [
    'Red', 'Green', 'Blue', 'Brown', 'Yellow', 'Black'
  ]

  const loopFun = () => {
      for(let i=0; i<colors.length; i++){
      console.log(colors[i])
    }
  }

  return (
    <div className='titles'>
      {colors.map((color, i) => (
        <p key={i} className={'title-'+i}>{color}</p>
      ))}    
      {loopFun()}
    </div>
  );
}

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

您可以在本地IDE中安装带有react插件/规则的eslint，以获取有关此类问题的警告/错误。

请查看文档：{{3}}

反应-for循环内部返回

1 个答案: