ReactJS 中的问题居中组件

Posted 2023-02-22

【中文标题】ReactJS 中的问题居中组件

【英文标题】：Issue centering components in ReactJS

【发布时间】：2020-09-15 03:42:43

【问题描述】：

我来自 React Native，所以我还在适应 ReactJS。我有两个按钮，一个普通按钮和一个图标按钮。我想将常规按钮居中并在屏幕底部放置图标按钮。我试过使用 justifyContents: 'center' 和我的代码中显示的类似设置，但它似乎不起作用。我所有的代码都在下面，cmets 显示了我的按钮代码在哪里。感谢您提供任何帮助。

import React, useState from 'react';
import SettingsIcon from '@material-ui/icons/Settings';
import  Button , TextField, IconButton from '@material-ui/core';

function App() 

  const [task, setTask] = useState("");
  const [goals, setGoal] = useState(["test"]);

  const addGoal = () => 
    setGoal([...goals, task]);
  ;

  const listItems = goals.map((number) =>
    <li>goals</li>
  );

  return (
    <div style=padding: 50, flexDirection: 'column'>

      <div style = display: 'flex', fontFamily: 'Roboto', fontSize: 55>
        <text>Tuesday</text>
      </div>

      <text style = display: 'flex', fontFamily: 'Roboto', fontSize: 45, marginBottom: 50>11:45</text>

      <div style = marginBottom: 20>
        <TextField inputProps=style: fontFamily: 'Roboto' InputLabelProps = style: fontFamily: 'Roboto' id="standard-basic" autoComplete='off' label="New Goal"  fullWidth value = task onChange = e => setTask(e.target.task)/>
      </div>

      //TRYING TO CENTER THIS BUTTON
      <div style = display: 'flex', alignSelf: 'center', justifContent: 'center'>
        <Button variant="outlined" disableElevation size = "medium">
          Add Goal
        </Button>
      </div>

      <div style = flexDirection: 'column', paddingTop: 40>
        <ui>listItems</ui>
      </div>

      //TRYING TO HAVE THIS AT THE BOTTOM OF THE PAGE
      <div style = display: 'flex', justifContent: 'flex-end'>
        <IconButton>
          <SettingsIcon/>
        </IconButton>
      </div>

    </div>
  );
;

export default App;

【问题讨论】：

为什么不为每个元素定义一个类并在不同的 css 页面上设置这些元素的样式？使用这么多内联 css 似乎不是正确的方法。我也认为这是 CSS 的问题，而不是 react js。

我已经按照你的建议添加了一个 CSS 标签，我只是使用内联来了解 ReactJS 中的格式样式。在把它分成类之前，我想以这种形式理解它。

我明白，但我建议你不要养成这种习惯。 :) 祝你好运！

当然，它的组织性要差得多，只是为了学习目的

【参考方案1】：

为了回答你的问题，我想你错过了，但它应该是 justifyContent，而不是 justifContent。

  <div style = display: 'flex', alignSelf: 'center', justifyContent: 'center'>

  <div style = display: 'flex', justifyContent: 'flex-end'>

【讨论】：

非常抱歉，这是一个愚蠢的错误

这不是问题。它可能被忽略了。这就是这个平台的用途。如果您有单独的 css 文件而不是内联 css，则会自动显示您的错误。我想说。如果你想在同一个页面中使用 css 并且你想动态地改变你使用 props 的 css，我可以推荐 styled-components。会为你工作。 styled-components.com

我会研究一下这个库。它似乎比我目前使用的方法更有条理。感谢您的所有帮助，我非常感谢