如何与按钮元素在同一行渲染个性化的按钮组件

Posted 2023-02-23

【中文标题】如何与按钮元素在同一行渲染个性化的按钮组件

【英文标题】：How to render a personalized button component on the same line with button elements

【发布时间】：2021-05-15 19:53:57

【问题描述】：

我正在尝试在 react 中渲染几个按钮，以及用于特殊目的的专用按钮组件。这是我的代码：

render() 
    return (
        <div id="headerButtons">
            <button id="HomeButton" onClick=this.linkHome>Home</button>
            <button id="SupportPageButton" onClick=this.linkSupportPage>Support</button>
            <AccountButton></AccountButton> 
        </div>
    )

但是，当我运行网页时，AccountButton 内容（现在只是另一个按钮，但最终会包含几个按钮）呈现在其他两个按钮下方。

知道如何解决这个问题，使它们都呈现在同一水平线上吗？

【问题讨论】：

AccountButton 文件是什么样的？此外，您将它们放在 DIV 中，但这并不意味着它会将它们全部内联。这实际上取决于您尝试显示它们的屏幕空间，因为页面会包装它们。您是否使用任何 material-ui 或 react-bootstrap css 样式，或任何其他样式库？如果是这样，您可能希望使用这些库使其以您正在寻找的方式显示。

现在，我正在尝试用纯 css 来设置它们的样式。屏幕的大小是一个完整的网页，所以它不应该包装它......我想知道 React 是否出于某种原因为不同类型的组件创建了一个新行？

这取决于您的 AccountButton 文件。它可能会返回一个包裹它的 DIV。这取决于您如何定义渲染。 @buzatto 做了一个很好的答案，可能会有所帮助。查看您的 AccountButton 渲染，并确保 React 没有围绕该按钮创建单个 DIV 包装器。

非常感谢您的解释！！！我没有考虑 AccountButton 中的那个 DIV 创建另一个容器。但这现在是有道理的。谢谢杰森！

【参考方案1】：

将包装 div headerButtons css 设置为 flex:

#headerButtons 
  display: flex;

同样在AccountButton 使用fragments 来包装你的按钮，以避免div 包装器。

更多关于flex:

【讨论】：

我也在想同样的事情，这就是为什么我要求 Luke 也分享他的 AccountButton 文件。

问他的文件以获得更好的洞察力是合理的。因为他说 AccountButton 将是按钮的一个组件，所以我希望它会有一个典型的 div 包装器，它会破坏任何布局。