React HOC 内容组件溢出屏幕答案

【问题标题】：React HOC content component overflow screenReact HOC 内容组件溢出屏幕
【发布时间】：2021-11-12 22:10:54
【问题描述】：

我正在为我的 React 项目使用 HOC 来创建模板管理员。但我不知道为什么 HomeScreen 组件的内容，<p> 标签溢出到屏幕。这是我的代码

首页模板

import React, { Fragment } from 'react'
import { Route } from 'react-router-dom'
import styles from './home.module.css'
import HeaderBar from '../../component/HeaderBar/HeaderBar'
import SideBar from '../../component/Sidebar/SideBar'

export default function HomeTemplate(props) {

  const { Component, ...restProps } = props
  return <Route {...restProps} render={(propsRoute) => {
    return <div className={styles.home_container}>
      <div className={styles.home_container__headerBar}>
        <HeaderBar />
      </div>
      <div style={{display:'flex',flexDirection:'row',minHeight:'100vh'}}> 
        <div style={{minWidth:'30%'}}>
          <SideBar />
        </div>
        <div style={{}}>
          <Component {...propsRoute} />
        </div>
      </div>
    </div>
  }} />
}

主屏幕

[![import React from 'react'
import styles from './homescreen.module.css'
export default function HomeScreen(props) {
  console.log(props)
  return (
    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box', background: 'green' }}>
      <p>asasasasasdsadsadsadsadasasdsadasdasdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdassasdasdasdasdgdfgdf</p>
    </div >
  )
}

App.js

import logo from './logo.svg';
import './App.css';
import { Switch, BrowserRouter } from 'react-router-dom'
import HomeTemplate from './template/HomeTemplate/HomeTemplate';
import HomeScreen from './page/HomeScreen/HomeScreen'
function App() {
  return (
    <div style={{maxWidth:'100%'}}>
      <BrowserRouter>
        <Switch >
          <HomeTemplate exact path="/homescreen" Component={HomeScreen} />
          <HomeTemplate exact path="/" Component={HomeScreen} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

感谢您的帮助。

【问题讨论】：

能不能做个代码沙箱分享一下让大家更好理解

标签： reactjs layout flexbox higher-order-components

【解决方案1】：

我发现问题是因为我的 p 标签中的内容是一个没有空格的字符串，我添加了wordBreak:'break-word'，我尝试了一个很长的常规文本，它工作正常

【讨论】：