javascript - 三元运算符？ Javascript中的问题正在从预期中解决

我有以下带有Typescript的React组件，该组件应该根据通过Firebase auth进行身份验证的用户来回切换：

const Navigation = (authUser: any) => (
    <div>
        {console.log(authUser)}

        {authUser ? <NavigationAuth /> : <NavigationNonAuth /> }
        <h1>Navigation</h1>
    </div>
);

它上面的组件是App，它在authUser属性中的传递方式如下：

...
interface Props {
    firebase?: Firebase,
    listener?: any
}

interface State {
    authUser: any,
}

class App extends React.Component<Props, State> {
    listener: any;
    constructor(props: any) {
         super(props)

         this.state = {
              authUser: null
    }
}

componentDidMount() {
    this.listener = this.props.firebase?.auth.onAuthStateChanged(authUser => {
        authUser
        ? this.setState({ authUser })
        : this.setState({ authUser: null });
    });
}

componentWillUnmount() {
    this.listener();
}
render() {
    return(
    <Router>
        <div>
            <Navigation authUser={this.state.authUser}/>
            <hr />
            ...

使用React开发人员工具，我可以看到authUser工具中的authUser为null，因为我还没有触发任何登录操作，尽管该值明确为null，但仍将{authUser ? <NavigationAuth /> : <NavigationNonAuth /> }等同为true并进行渲染<NavigationAuth />代替“”

我的逻辑中有什么我想念的吗？还是一些我不知道的带有空值的三元运算符的时髦方式？我希望，如果它是一个空值，false结果将呈现，除非我目前对其进行编码的方式正在某种程度上寻找除某种未定义之外的任何值？哪个空值将计为？因为它不是不确定的？

奇怪的是，如果我明确定义它，那么三元运算符就这样：
{authUser != null ? <NavigationAuth /> : <NavigationNonAuth /> }

即使该值为null，它仍会呈现<NavigationAuth />。我究竟做错了什么？

最佳答案

我不熟悉TypeScript，但不应该是props.authUser吗？在香草JS中，我会这样写：

const Navigation = ({authUser}) => (
    <div>
        {console.log(authUser)}

        {authUser ? <NavigationAuth /> : <NavigationNonAuth /> }
        <h1>Navigation</h1>
    </div>
);

关于javascript - 三元运算符？ Javascript中的问题正在从预期中解决，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59473720/