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

Posted 2023-04-13

【中文标题】反应创建一个水平分隔线，中间有文本

【英文标题】：React Create a Horizontal Divider with Text In between

【发布时间】：2020-08-27 01:01:36

【问题描述】：

我需要创建一个 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>
  );
 

【问题讨论】：

如果你查看MUI Divider API的文档你会发现它不接受孩子。也许你需要自己写这个组件

@keikai 我已经用代码编辑了我的问题。

【参考方案1】：

使用 Material 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>

结果

【参考方案2】：

这里有一个你可以做什么的自定义示例：repro on 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;

【讨论】：

我稍微整理了一下，但您的回答对我来说是一个很好的开始。谢谢。

【参考方案3】：

你可能想要不同的间距

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

或者

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

对于可配置的spacing，这里是Github Gist

如果您愿意，也可以在代码框中添加playground

【参考方案4】：

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

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

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

【参考方案5】：

不幸的是，目前在 MUI 中使用带有文本的 Divider 仅在 v5 中可用，该版本仍处于 alpha 阶段。如果您想尝试，可以下载 alpha 包，但请注意，它仍然非常不稳定，可能需要进行大量更改才能迁移到 v5，这不是很值得。

GitHub 讨论：https://github.com/mui-org/material-ui/issues/24036