反应为什么三元运算符在具有上下文值的 jsx 中不起作用

Question

请参阅下面的代码，三元运算符在 jsx 内部的 React 中无法使用上下文 api 的值来工作

const { isSortex, isTransportLocal, setAcessLevel, isTransportOutside } = useContext(accessLevel);

//isTransportOutside is false and 
//isTransportLocal is true
return (
    <>
        <div className="R3-my-Blue-dark" style={style}>
            <PannelButtonContainer>
                {isTransportOutside ? <PannelButton buttontext="Truck Freight Outside" /> : null}
                {isTransportLocal ? <PannelButton buttontext="Workslip" /> : null}
            </PannelButtonContainer>
        </div>
    </>
);

两个组件都在渲染，true 应该渲染而 false 不应该渲染

Answer 1

您应该使用

&&

而不是

?

进行条件渲染。