react条件渲染和列表渲染

一、条件渲染

        React中的条件渲染可以通过JSX语法和条件表达式来实现。具体地，可以在组件的render方法中使用if、else if和else语句或者三元运算符等来根据条件返回不同的组件结构。

例如，下面的代码中根据isLoggedIn这个布尔值来判断是否显示欢迎信息或登录按钮：

  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button>Login</button>;
  }
}

 同时，也可以使用条件运算符来简化上述代码（三元表达式）：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button>Login</button>
      )}
    </div>
  );

使用逻辑与运算符（Logical AND Operator）： 

function MyComponent(props) {
  return (
    <div>
      {props.showElement && <div>This element is shown</div>}
    </div>
  );
}
//props.showElement为true，则渲染第二个元素，否则不渲染

 需要注意的是，在React中，只要组件的props或state发生变化，组件就会重新渲染，因此可以通过改变状态来控制条件渲染。

二、列表渲染

在React中，可以使用数组的map()方法来实现列表渲染。

具体步骤如下：

1.    创建一个包含数据的数组。

2.    使用map()方法遍历该数组，对每个元素返回一个表示该元素的React组件（或JSX元素）

3.    将所有组件放置在一个父元素中，并将该父元素作为返回值。

例如，如果我们有一个包含以下数据的数组：

const items = ['apple', 'banana', 'orange'];

<ul>
  {items.map((item) => (
    <li key={item}>{item}</li>
  ))}
</ul>

使用forEach方法：

function MyComponent(props) {
  const items = [];
  for (let i = 0; i < props.data.length; i++) {
    items.push(<li key={i}>{props.data[i]}</li>);
  }

  return <ul>{items}</ul>;
}

使用for循环也可以实现列表渲染，但通常不如map直观和简洁。确保在列表渲染时为每个子元素提供唯一的key，以提高性能和避免警告。