javascript - 试图让我的删除按钮在我的 Challengebox 组件的同一行/右侧 - React

Question

嘿！我试图让我的删除按钮在我的 Challengebox 组件的同一行/右侧。有没有办法用 flex-wrap 做到这一点？

.totalbox{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

---

<div className="challengeboxes">

{    
this.state.challenges.map(challenge => 
    (
        <div className="totalbox" key={challenge._id}>

            <Challengebox 
                key={challenge._id} 
                id={challenge._id} 
                title={challenge.title} 
                description={challenge.description}
            />

            <button onClick={() => this.onDelete(challenge._id)}>
                Delete
            </button>

        </div>
    ))                                                                      
}

</div>

标签： javascriptreactjs

Answer 1

也许你可以试试下面

<div className="challengeboxes">

{    
this.state.challenges.map(challenge => 
    (
        <div className="totalbox" key={challenge._id}>
            <div className="challenge-box-container">
               <Challengebox 
                   key={challenge._id} 
                   id={challenge._id} 
                   title={challenge.title} 
                   description={challenge.description}
               />
            </div>
            <button onClick={() => this.onDelete(challenge._id)}>
                Delete
            </button>

        </div>
    ))                                                                      
}

</div>

.totalbox .challenge-box-container {
   width: 80%;
}

由于我不知道Challengebox组件中有什么，我无法评论是否有任何问题。所以我只是想把它包装在一个 div 中并为其提供宽度。希望这可以帮助。