能者 发表于 2023-9-21 21:00:10

在React中使用条件渲染

在React中,条件渲染可以通过使用`if`语句、三元表达式或逻辑与(&&)运算符来实现。以下是几种常见的条件渲染模式:

1. 使用if语句:

function Component(props) {
if (props.condition) {
    return <div>条件为真时显示的内容</div>;
} else {
    return <div>条件为假时显示的内容</div>;
}
}


2. 使用三元表达式:

function Component(props) {
return (
    <div>
      {props.condition ? <div>条件为真时显示的内容</div> : <div>条件为假时显示的内容</div>}
    </div>
);
}


3. 使用逻辑与(&&)运算符:

function Component(props) {
return (
    <div>
      {props.condition && <div>条件为真时显示的内容</div>}
    </div>
);
}


无论使用哪种方式,条件为真时将会渲染相应的 JSX 元素,而条件为假时则不会进行渲染。这样可以根据组件的状态或属性来动态地显示或隐藏元素,从而实现条件渲染。

页: [1]
查看完整版本: 在React中使用条件渲染