如何理解 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 内的主标签内渲染。