react 循环条件判断

在 React 中，循环条件判断通常使用 JSX 的 map() 方法来实现。例如，如果你有一个数组需要循环渲染到页面上，可以使用以下方式：

const numbers = [1, 2, 3, 4, 5];

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

在上面的例子中，我们将数组 numbers 作为 props 传递给 NumberList 组件。在 NumberList 组件中，我们使用 map() 方法来遍历 numbers 数组，并将每个元素渲染成一个 li 元素。

在使用 map() 方法时，需要注意以下几点：

1. 需要为每个子元素设置一个唯一的 key 属性，以便 React 能够正确地识别每个子元素。
2. 在 JSX 中，花括号 {} 可以用来嵌入 JavaScript 表达式，从而实现动态渲染。
3. 在 map() 方法中，需要返回一个 JSX 元素，否则会导致编译错误。

除了使用 map() 方法外，还可以使用 for 循环来实现循环条件判断，但这种方式不太常见，因为它与 React 的思想不太相符。