在 React 中水平对齐几个组件

Question

我有三大组件。其中两个占屏幕的 1/3，我的目标是从左到右水平呈现它们。

当只是把它们放在我添加的代码中时，它们会一个接一个地垂直呈现，导致用户向下滚动以找到它们。如何在屏幕上水平显示它们？ （我用 css 尝试了几件事，但没有成功）。

这是返回方法，Tables 组件内部包含两个不同的表：

 return (
      <div>
        {title} <Chat />
        <Tables/>}

      </div>
    );

Answer 1

你应该看看 flexboxes ！

您可能知道，React 允许您创建组件，因此您可以像使用 flexbox 的 html 元素一样设置它们的样式。

一定要读一读this article！

编辑：示例

HTML：

<div class="flexbox-container">
    <div>Element1</div>
    <div>Element2</div>
    <div>Element3</div>
</div>

CSS：

.flexbox-container {
    display: flex;
    flex-direction: row;
}

这将使您的元素水平对齐，间距均匀！ 尝试使用容器的边距和 justify-elements 来对齐元素。

Answer 2

首先，我应该建议你改进你的问题：你说你有三个大组件，但在 render() 方法中我看到两个 div 和标题。是这 3 个大组件的标题吗？
或者，标题是否应该刚好在Chat 组件上方，然后与Table 组件并排放置？

不管怎样，我以为标题就在Chat 组件的正上方，并且它们与Table 组件并排在一起：看看这个小提琴：

window.styled = window.styled.default;

const AppContainer = styled.div`
    width: 500px;
    height: 300px;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 25% 75%;
`;

const Title = styled.div`
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    background: #BD5027;
    color: #F0F0F0;
    padding: 5px;
`;

const Chat = styled.div`
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    background: #276DBD;
`;

const Table = styled.div`
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    background: #2FC849;
`;

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        const {title} = this.props;
        
        return (
            <AppContainer>
                <Title>{title}</Title>
                <Chat />
                <Table />
            </AppContainer>
        );
    }
}

ReactDOM.render(<App title="Hello World!" />, document.getElementById('root'));

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.10/styled-components.min.js"></script>

<div id='root'></div>

现在，解释一下：我使用了基于网格系统的全新 CSS 规则。这些规则非常适合创建应用程序的骨架，允许您创建一个网格系统，您可以在其中呈现不同的项目。进一步的解释可以找到，例如这里→https://css-tricks.com/snippets/css/complete-guide-grid/

如果我的假设是错误的，我的结果不是你想要的，请告诉我你想要达到的目标，我会尽力提供帮助！

编辑： 为简单起见，在此示例中，我使用 styled-component 而不是创建组件，但我认为您了解了网格规则的“操作方法”。