React 在使用三元运算符进行条件渲染时弄乱了 HTML 元素答案

【问题标题】：React is messing up HTML elements when using Ternary Operator for conditional renderingReact 在使用三元运算符进行条件渲染时弄乱了 HTML 元素
【发布时间】：2021-07-10 20:12:50
【问题描述】：

当用户不为真时，React 会显示“登录”div，但当用户为真时，React 会在“登录”div 内显示“用户配置文件”div 的子元素。为什么会这样？

我尝试了几种方法来解决这个问题，但这个错误并没有消失。如果有人知道如何解决此错误，请提供帮助。

{user ?
                                (
                                    <div className="user-profile">
                                        <div>
                                            <i className="bi bi-person-fill"></i>
                                            <span style={{ marginLeft: "5px" }}>{"Hi, " + user.firstname}</span>
                                        </div>
                                        <div className="user-profile-menu">
                                            <ul className="menu-list">
                                                <li className="menu-item">
                                                    <i className="bi bi-person-fill"></i>
                                                    <a href="#">Your Profile</a>
                                                </li>
                                                <li className="menu-item">
                                                    <i className="bi bi-cart4"></i>
                                                    <a href="#">Your Orders</a>
                                                </li>
                                                <li className="menu-item">
                                                    <i className="bi bi-geo-alt-fill"></i>
                                                    <a href="#">Manage Address</a>
                                                </li>
                                                <li className="menu-item">
                                                    <i class="bi bi-person-x-fill"></i>
                                                    <a href="#">Sign Out</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                )
                                : (
                                    <div className="signin">
                                        <a href="/auth/signin" className="signin-btn">
                                            <i className="bi bi-person-fill"></i>
                                            <span style={{ marginLeft: "5px" }}>Sign In</span>
                                        </a>
                                    </div>
                                )
                            }

【问题讨论】：

“用户”和“用户”之间不需要空格吗？ ?
你能把它放在沙箱里吗？
你必须在其他地方有一个错误，逻辑是无情的:)
好的，我把代码放到codesandbox里

标签： javascript html reactjs next.js

【解决方案1】：

我做了一个codesandbox demo。当您传递用户 null 时，您将看到登录选项，当您提供用户时，您将看到个人资料详细信息页面。

https://codesandbox.io/s/flamboyant-sunset-7wrh1?file=/src/MiniFacebook.jsx

【讨论】：

【解决方案2】：

我猜user 是在您的组件之外设置的。我的假设是您的组件实际上并没有看到user 的更新，因此渲染不正确。

确保user 是组件状态的一部分，这样当user 发生变化时，组件就会更新。

【讨论】：

你是对的，谢谢，我已经解决了我的错误。