Question

我使用的是旧版本的CRUD，所以我认为某些代码无法再使用了，但是vscode并没有像出错一样指出它，因此页面继续，但是我的内容框仍然为空。有人可以帮我吗？

这些是我认为应该改进的4条代码...

首先是我的标头，不向我显示props.icon任务

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都不显示我的HTML

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

然后我的routes.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")。在下一个主要版本中将删除对后者的支持。 stack_frame_overlay_proxy_console @ index.js：2178 index.js：2178警告：请使用require("history").PathUtils而不是require("history/PathUtils")。在下一个主要版本中将删除对后者的支持。 stack_frame_overlay_proxy_console @ index.js：2178 react-dom.development.js：88警告：componentWillMount已重命名，不建议使用。有关详细信息，请参见react-unsafe-component-lifecycles。

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

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

Answer 1

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

简而言之，props是组件相互传递以填充UI并更新应用程序状态的输入。在函数式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传递，但是仍必须从函数的参数中对其进行访问。在此示例中，props.children的{{1}}是类别为MainComponent的{{1}}：

div

无法在反应中显示组件

1 个答案: