反应中显示组件的故障

Question

im使用了旧版本的CRUD，所以我认为有些代码已经不起作用了，但vscode并没有像错误一样指出它，所以页面继续，但我的内容框仍然是空的。有人能帮我吗？

这是我认为应该改进的4个代码。。。

第一个不显示道具的标题。图标任务

import './Header.css'
import React from 'react'
export default function props () {
return (
<header className = "header d-none d-sm-flex flex-column">

<h1 className="mt-3">
<i className={`fa fa-${props.icon}`}></i>{props.title}
</h1>
<p className="lead text-muted">{props.subtitle}</p>
</header>
)}

这里是我的main.jsx，我的头通过导入进入其中

import './Main.css'
import React from 'react'
import Header from './Header'
function props () {
return (
<React.Fragment>
<Header {...props}/>
<main className="content container-fluid">
<div className="p-3 mt-3">
{props.children}
</div>
</main>
</React.Fragment>
)    
}

export default props

现在我的app.jsx和app.css将呈现我的Htmls

import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.min.css'
import './App.css'
import React from 'react'
import {HashRouter} from 'react-router-dom'
import Routes from './Routes'
// import Home from '../components/home/Home'
import Logo from '../components/template/Logo'
import Navi from '../components/template/Navi'
import Footer from '../components/template/Footer'
// import props from '../../../frontend2/src/components/template/main'

function Props () {
return(
<HashRouter>
<div className="App">
<Logo />
<Navi/>
<Routes/>
<Footer /> 
</div>
</HashRouter>
)
}

export default Props

/////////////////\//////

:root{
--bg-dark: #1a2f3a;

--logo-height: 100px;
--header-height: 100px;
--aside-width:  225px;
--footer-height: 40px;
--shadow:
0 2px 23px 0 rgba(0, 0, 0, 0.1)
0 2px 49px 0 rgba(0, 0, 0, 0.06)
}

*{
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
/* layout em grid */
.App {
margin: 0px;
display: grid;
grid-template-columns: var(--aside-width) 1fr;
grid-template-rows: 
var(--header-height)
1fr 
var(--footer-height);
grid-template-areas: 
"logo header"
"menu content"
"menu footer";
height: 100vh;
background-color: #f5f5f5;
}
aside.logo{
grid-area: logo;
}
header.header{
grid-area: header;
}
aside.menu-area{
grid-area: menu;
}
main.content{
grid-area: content;
}
footer.footer{
grid-area: footer;
}

然后是我的路线.jsx

import React from 'react'
import {Switch, Route, Redirect} from 'react-router'
import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
function Props (){
return(
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={UserCrud}/>
<Redirect from="*" to="/"/>
</Switch>
)   
}
export default Props

最后但同样重要的是我的家，它拥有我的主干道，是我的/路径

import React from 'react'
import {Switch, Route, Redirect} from 'react-router'
import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
function Props (){
return(
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={UserCrud}/>
<Redirect from="*" to="/"/>
</Switch>
)   
}
export default Props

请在这里帮我，我已经搜索了2天这个错误，我很确定我有一个sintax错误，如果你有这个专业知识，请分享

控制台上有一些问题，但我甚至不知道这个历史问题是从哪里来的，请注意。。。

警告：请使用require("history").createMemoryHistory而不是require("history/createMemoryHistory")。对后者的支持将在下一个主要版本中删除。[e-mail]:2178index.js:2178警告：请使用require("history").PathUtils而不是require("history/PathUtils")。对后者的支持将在下一个主要版本中删除。[e-mail]:2178react-dom.development.js:88警告：componentWillMount已被重命名，不建议使用。有关详细信息，请参阅反不安全组件生命周期。

• 将有副作用的代码移动到componentDidMount，并在构造函数中设置初始状态
• 将componentWillMount重命名为UNSAFE_componentWillMount，以在非严格模式下抑制此警告。在React 17.x中，只有UNSAFE_名称才能工作。要将所有弃用的生命周期重命名为新名称，可以在项目源文件夹中运行npx react-codemod rename-unsafe-lifecycles

请更新以下组件：HashRouter、Route、Router、Switchnull

Answer 1

我认为您可能对React框架中props的性质有点混淆。考虑阅读这些文档，以获得更多关于我们如何使用它们来构建React应用程序中的数据流的概述。

简单地说，props是组件相互传递的输入，用于填充UI和更新应用程序的状态。在functional React中，我们可以将它们视为函数(即组件(为了在JSX中返回给定输出而使用的参数。

因此，当涉及到代码时，将所有组件函数命名为Props与它们实际可使用的props不同。首先，组件的父级必须在JSX中向它传递一个prop，然后它必须从函数参数中访问该prop，才能使用它。下面是一个简化的例子，希望能让你更清楚地了解这个模式：

// App.jsx
function App() {
return (
<div>
<Header title={'someValue'}/>
<MainComponent />
</div>
);
};
// Header.jsx
function Header(props) {
return (
<header>
<h1>{props.title}</h1>
</header>
);
};

我看到您也在尝试使用props.children，这是一个略有不同的功能，但工作方式不同。React组件的children是该组件在声明的实例中封装的任何元素。子级本身不必以通常的方式作为props传递，但仍必须从函数的参数访问它们。在本例中，MainComponent的props.children是类别为child:的div

// App.jsx
function App() {
return (
<div>
<MainComponent>
<div class="child">
</div>
</MainComponent>
</div>
);
};
// MainComponent.jsx
function MainComponent(props) {
return (
<main>
{props.children}
</main>
);
};