IT技术 - React 创建一个水平分隔线，中间有文本 - 吾爱随笔录

React 创建一个水平分隔线，中间有文本

IT技术 reactjs material-ui divider

2021-05-12 16:12:11

我需要创建一个 React 组件，它是一个水平分隔线，中间有文本之类的内容。我在网上拥有的所有资源都无法帮助我完成这项工作。我通过创建一个 Divider 组件并将我的文本放在中间来尝试使用 material-ui 分隔符，如下例所示：

<Divider>Or</Divider>

但我收到错误：

hr is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

我需要在下图中实现这一点：

任何帮助将不胜感激。

这些是我的代码如下：

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Divider from '@material-ui/core/Divider';

 const useStyles = makeStyles((theme) => ({
   root: {
   width: '100%',
   maxWidth: 360,
   backgroundColor: theme.palette.background.paper,
 },
 }));

 export default function ListDividers() {
 const classes = useStyles();

 return (
 <List component="nav" className={classes.root} aria-label="mailbox 
 folders">

  <Divider>Or</Divider>

  </List>
  );
 }

4个回答

使用材质 UI。

import React from "react";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    alignItems: "center"
  },
  border: {
    borderBottom: "2px solid lightgray",
    width: "100%"
  },
  content: {
    paddingTop: theme.spacing(0.5),
    paddingBottom: theme.spacing(0.5),
    paddingRight: theme.spacing(2),
    paddingLeft: theme.spacing(2),
    fontWeight: 500,
    fontSize: 22,
    color: "lightgray"
  }
}));

const DividerWithText = ({ children }) => {
 const classes = useStyles();
 return (
  <div className={classes.container}>
    <div className={classes.border} />
    <span className={classes.content}>{children}</span>
    <div className={classes.border} />
  </div>
 );
};
export default DividerWithText;

您可以像下面这样导入和使用它

<DividerWithText>Or</DividerWithText>

结果

这是您可以执行的自定义示例：在 stackblitz 上重现

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

const App = () => {
  return <Divider>Or</Divider>;
};

const Divider = ({ children }) => {
  return (
    <div className="container">
      <div className="border" />
      <span className="content">
        {children}
      </span>
      <div className="border" />
    </div>
  );
};

render(<App />, document.getElementById("root"));

和 CSS：

.container{
  display: flex;
  align-items: center;
}

.border{
  border-bottom: 1px solid black;
  width: 100%;
}

.content {
  padding: 0 10px 0 10px;
}

当前答案会导致任何中间有空格的文本换行：

如果发生这种情况，将 width: 100% 更改为 flexGrow: 1 应该可以解决它：

  border: {
    borderBottom: "2px solid lightgray",
    flexGrow: 1,
  }

你可能想要不同的间距

<Divider spacing={1}>Hello World</Divider>

或者

<Divider spacing={2}>Hello World</Divider>

对于spacing此处可配置的Github Gist

如果您愿意，也可以在代码沙盒中的游乐场

其它你可能感兴趣的问题

上一篇在react js 上显示浏览器后退按钮事件的警报下一篇cookies.remove('abc') 在 reactJs 中不起作用