<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. react怎么請求部分刷新

          來源:php中文網 | 2022-12-30 14:01:01 |

          本教程操作環境:Windows10系統、react18.0.0版、Dell G3電腦。


          (相關資料圖)

          react怎么請求部分刷新?

          React實現局部刷新

          【項目結構】

          流程: 入口文件 -> 路由 -> layout -> Analysi/Monitor/Workspace

          1.入口文件 -> src/index.js

          2.組件 -> src/coms

          3.布局 -> src/layout

          4.路由 -> src/routes

          【流程解析】

          流程: 入口文件 -> 路由 -> layout -> Analysi/Monitor/Workspace

          1.路由部分

          //import React from "react"; 引入類//import { Component } from "react";  引入對象import React, { Component } from "react";import {HashRouter, Route, Switch} from "react-router-dom";//引入布局和子組件import BasicLayout from "../layout/layout";import Analysis from "../coms/Analysis";import Monitor from "../coms/Monitor";import Workplace from "../coms/Workplace";//分配路由const BasicRoute = () => (    <HashRouter>        <Switch>            <Route exact path="/" component={BasicLayout}/>            <Route exact path="/Analysis" component={Analysis}/>            <Route  path="/Monitor" component={Monitor}/>            <Route  path="/Workplace" component={Workplace}/>        </Switch>    </HashRouter>);export default BasicRoute;

          2.布局部分(重點)

          import React, { Component } from "react";import  {Layout ,Menu,Icon} from "antd";import { Router, Route, Link,HashRouter } from "react-router-dom"import "antd/dist/antd.min.css"import BasicRoute from "../routes/router";const { Header, Footer, Sider, Content } = Layout;export default class BasicLayout extends Component {  render() {    return (        <Layout>        <Sider width={256} style={{ minHeight: "100vh", color: "white" }}>                        <Menu theme="dark" mode="inline" >                {/*定義了項目的link,會按照路由走*/}                <Menu.Item><Link to="/Analysis">Item1</Link></Menu.Item>            </Menu>                    </Sider>        <Layout >          <Header style={{ background: "#fff", textAlign: "center", padding: 0 }}>Header</Header>          <Content style={{ margin: "24px 16px 0" }}>            <div style={{ padding: 24, background: "#fff", minHeight: 360 }}>              {/*Analysis.js文件引用了BasicLayout,并把自己的全部子節點(子組件)傳過來*/}              {this.props.children}                          </div>          </Content>          <Footer style={{ textAlign: "center" }}>Ant Design ?2018 Created by Ant UED</Footer>        </Layout>      </Layout>    )  }}

          3.子組件(Analysis.js) (出錯點)

          import React from "react";import BasicLayout from "../layout/layout";export default () => {    //用BasicLayout標簽包裹,內容傳到layout.js的this.props.children部分       return (<BasicLayout><h1>Analysis Page</h1></BasicLayout>)}

          【效果】

          【總結】

          按照antd官網的教程走了一遍,發現不能局部刷新

          原因在于官網用了umi框架。我是自己配置,有很多遺漏,導致子組件沒有正確的傳遞到layout中。

          推薦學習:《react視頻教程》

          以上就是react怎么請求部分刷新的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: React

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>