如何理解 React 文件

Question

我在 Laravel 中使用 React，我發現我無法在 React 中刷新或重新加載頁面的問題。 所以為了解決這個問題，我找到了很多建議，比如使用historyApiFallback 、 404 page和許多其他方法，但我發現它們現在對我沒有用。

我知道我不能這樣做，因為 React 由於server- and client-side routing 而沒有系統。 然后我找到了一個演示項目，他們使用了 Redux，我可以刷新他們的頁面。 我得到了演示項目，我可以在其中使用任何組件並刷新它們多少次。 所以有一個帶有Base.js的文件名，我不明白這個文件為什么他用它來做什么。 讓我分享文件以及它的使用位置。

Base.js

import React from 'react';
import { connect } from 'react-redux';
import Header from './components/Header';

const Base = ({ children }) => (
  <div>
    <Header />
    <main>{children}</main>
  </div>
);

const mapStateToProps = (state) => ({
  isAuthenticated: state.Auth.isAuthenticated,
});

export default connect(mapStateToProps)(Base);

Header.Js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';
import * as actions from '../store/actions';

class Header extends Component {
  handleLogout = (e) => {
    e.preventDefault();
    this.props.dispatch(actions.authLogout());
  };

  render() {
    return (
      <header className="d-flex align-items-center justify-content-between">
        <h1 className="logo my-0 font-weight-normal h4">
          <Link to="/">Laravel React</Link>
        </h1>

        {this.props.isAuthenticated && (
          <div className="navigation d-flex justify-content-end">
            <Nav>
              <NavItem>
                <NavLink tag={Link} to="/archive">
                  Archive
                </NavLink>
                <NavLink tag={Link} to="/Myfile">
                Myfile
                </NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Account
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>Settings</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem onClick={this.handleLogout}>
                    Log Out
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </div>
        )}
      </header>
    );
  }
}

const mapStateToProps = (state) => ({
  isAuthenticated: state.Auth.isAuthenticated,
});

export default connect(mapStateToProps)(Header);

公共.js

import PropTypes from 'prop-types';
import { Route } from 'react-router';
import Base from '../Base';

const PublicRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => (
      <Base>
        <Component {...props} />
      </Base>
    )}
  />
);

PublicRoute.propTypes = {};

export default PublicRoute;

split.js

import React from 'react';
import PropTypes from 'prop-types';
import { Route } from 'react-router';
import { connect } from 'react-redux';
import Base from '../Base';

const SplitRoute = ({
  component: Component,
  fallback: Fallback,
  isAuthenticated,
  ...rest
}) => (
  <Route
    {...rest}
    render={(props) => (isAuthenticated ? (
      <Base>
        <Component {...props} />
      </Base>
    ) : (
      <Base>
        < Fallback {...props} />
      </Base>
    ))}
  />
);

SplitRoute.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.Auth.isAuthenticated,
});

export default connect(mapStateToProps)(SplitRoute);

現在它有經過身份驗證的系統，所以我理解它，但為什么它使用基礎 function以及它在做什么？ 我不理解。

Answer 1

看起來 Base.js 是 Header 和任何渲染的子項（傳遞的道具）的容器。 這是對單獨的邏輯做出反應並使其更具可讀性的好習慣。 因此，當他將 Base 導入 Public.js 文件時，它將呈現 Header 和他從公共 function 道具傳遞給它的組件。

把它想象成布局的骨架，通過導入 Base 它將始終呈現 header 和 header 文件中的任何邏輯，以及他傳遞給它的任何內容。 正如你所看到的，他根據 isAuthenticated 是真還是假向它傳遞不同的組件。 如果它是假的，他們正在渲染 Base 並傳遞一個后備組件 - 這將在 Base function 內的主標簽內渲染。