如何根据条件设置内联样式边距？

Question

所以我有来自 Ant design 的布局，在个人资料页面的顶部有一个 div，其中包含用户信息。

在它下面，有很多 div（每个帖子一个），本质上是将一个帖子数组映射到帖子 div。 问题是，我一直在努力将它们放在页面中间，但是在弄乱了 flex 之后，我认为我最后做得很好。当用户在个人资料 div 下没有帖子时，它起初看起来很完美。有帖子的那一刻，个人资料 div 出于某种该死的原因向左移动了很多。

帖子完全居中，就像我想要的那样，但我的问题在于配置文件 div。为了修复它，我在上面做了一个margin-left。这使它看起来很完美。但没那么快。现在，当没有帖子时，它非常向右，因为它在 margin-left 之前完全居中

那么有什么方法可以让我输入if posts.length === 0 的条件，并相应地设置margin-left？

失去理智。

Layout.js代码：

<Content style={{ padding: '0 50px' }}>
       <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>Network</Breadcrumb.Item>
       </Breadcrumb>
       <div className="site-layout-content" style={{ background: "#fff ", padding: 24, minHeight: 280, display:"flex", alignItems:"center", flexDirection: "column"}}>
                {children}
       </div>
</Content>

UserProfile.js 代码：

<div>
       <div className="site-card-wrapper"  style={{display: "inline-block",marginBottom:20, width: 500, marginLeft:355}}>
             <Row gutter={16} type="flex" style={{justifyContent: "center", }}>
             <Col span={16}>
                 <Card title={user.username} bordered={true} style={{border: "1px solid #cccccc",}}>
                     <div style={{display:"flex", justifyContent: "space-between"}}>
                         <CardContent>Followers: {user.followers === undefined ? "0" : user.followers.length}</CardContent>
                         <CardContent>Following: {user.following === undefined ? "0" : user.following.length}</CardContent>
                     </div>
                 </Card>
             </Col>
             </Row>
         </div>
         
         {
              (userPosts.length > 0) ?
              <Heading>Posts</Heading> :
              <Heading>No posts yet</Heading>
         }    

         {
             userPosts.map(post => {
                 return <SinglePost key={post.id} post={post} />
             })
         }
            
</div>

SinglePost.js 代码（简体）：

<div className="site-card-wrapper" style={{marginBottom:20, width: 1200,}}>
            <Row gutter={16} type="flex" style={{justifyContent: "center"}}>
            <Col span={16} >
                <Card title={user.username} bordered={true} style={{border: "1px solid #cccccc"}}>
                    <div style={{fontSize: 18, marginTop: -10, whiteSpace: "pre-line"}}> 
                        {post.content}
                    </div>
    
                    <Likes>{likes} Likes</Likes>
                </Card>
            </Col>
            </Row>
        </div>

Answer 1

<div className="site-card-wrapper"
     style={
           {display: "inline-block",
            marginBottom:20,
            width: 500,
            marginLeft:posts.length === 0 ? 0 : 355
           }}>

使用上面的条件语句来处理运行时marginLeft