Question

render() {
return (
<ul>
{scopeOptions.map((option, keyOption) => (
    let myVar = keyOptions * 5
    <li key={keyOption}>
        <a href="#" data-value={option.value}>{option.label}</a>
    </li>
))}
</ul>
)
}

我想在循环中定义myVar变量，但我不知道该怎么做，请帮帮我！

Answer 1

在地图内返回对象，而不是隐式返回。

不确定我是否正确：-

1）keyOptions未定义，您是说keyOption

2）data-value="{option.value}"，我认为应该没有双引号

{scopeOptions.map((option, keyOption) => {
    let myVar = keyOption * 5
    return (
      <li key={keyOption}>
         <a href="#" data-value={option.value}>{option.label}</a>
      </li>
    )
})}

以下工作代码供参考：-

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  render() {
    let scopeOptions = [
      {
        'value': '1',
        'label': 'label 1'
      },
      {
        'value': '2',
        'label': 'label 2'
      }
    ]
    return (
      <div className="App">
        <ul>
          {scopeOptions.map((option, keyOption) => {
            let myVar = keyOption * 5;
            return (
              <li key={keyOption}>
                <a href="#something" data-value={option.value}>
                  {option.label}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望有帮助！

Answer 2

您正在使用箭头功能，创建一个块来定义变量，为了在箭头函数中编写多个语句。

{scopeOptions.map((option, keyOption) => {
    let myVar = keyOption * 5
    return (<li key={keyOption}>
        <a href="#" data-value={option.value}>{option.label}</a>
    </li>)
})}

要了解有关箭头功能的更多信息，请参考here

我如何在循环渲染HTML ReactJS中定义一个变量

2 个答案: