React创建一个水平分隔线，中间插入文本 [英] React Create a Horizontal Divider with Text In between

问题描述

我需要创建一个React组件，它是一个水平分隔线，其内容介于两者之间.我在线上的所有资源都无法帮助我完成此任务.我通过创建Divider组件并将文本放置在中间的方式来尝试了Material-ui分隔器，如下例所示:

I need to create a React component that is a Horizontal Divider with a content like text In between. All the resources I have online is unable to help me get this done. I tried a material-ui divider by creating a Divider component and placing my text in-between like the example below:

<Divider>Or</Divider>

但是我得到了错误:

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

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

I need to achieve this in the image below:

任何帮助将不胜感激.

以下是我的代码:

 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>
  );
 }

推荐答案

以下是您可以执行的自定义示例:

Here a custom example of what you could do : 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;
}

这篇关于React创建一个水平分隔线，中间插入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！