react 中的if 判断怎么写 dom

在React中，你不能直接使用普通的if语句来判断条件并渲染DOM，而是需要使用条件渲染（Conditional Rendering）的技术。条件渲染是根据状态或属性的变化来决定渲染哪个组件或元素。有几种不同的方式来实现条件渲染：

1. 使用JavaScript的if-else语句：你可以先定义一个变量，通过if-else逻辑来决定变量的值，然后将这个变量插入到JSX中。

function MyComponent({ condition }) {
  let displayContent;
  if (condition) {
    displayContent = <div>这是显示的内容</div>;
  } else {
    displayContent = null;
  }
  return (
    <div>
      {displayContent}
    </div>
  );
}

2. 使用三元运算符：这是一种简洁的在JSX内部使用条件逻辑的方法。

function MyComponent({ condition }) {
  return (
    <div>
      {condition ? <div>这是显示的内容</div> : null}
    </div>
  );
}

3. 使用与(&&)运算符：当你只需要在条件为真时渲染某些内容，使用&&运算符是一种简洁的方式。

function MyComponent({ condition }) {
  return (
    <div>
      {condition && <div>这是显示的内容</div>}
    </div>
  );
}

4. 使用元素变量：你还可以提前定义不同的React元素，然后根据条件来决定渲染哪一个。

function MyComponent({ condition }) {
  const content = condition ? <div>这是显示的内容</div> : null;
  return (
    <div>
      {content}
    </div>
  );
}

5. 使用组件逻辑：如果是渲染不同的组件，可以直接在if条件中返回不同的组件。

function MyComponent({ condition }) {
  if (condition) {
    return <SomeComponent />;
  } else {
    return <OtherComponent />;
  }
}

使用这些方法，你可以根据不同的条件来动态地渲染不同的React元素或者组件。注意，返回null不会渲染任何东西，这在某些情况下非常有用，比如你不想渲染任何元素但是又不想渲染一个空的JSX标签。