如何理解 React 文件

Question

我在 Laravel 中使用 React，我发现无法在 React 中刷新或重新加载页面的问题。所以为了解决这个问题，我找到了很多建议，比如使用 historyApiFallback、404 page 和许多其他方法，但我发现其中 none 现在对我有用。

我知道我不能这样做，因为 React 没有系统，因为 服务器端和客户端路由 。然后我找到了一个他们使用 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);

Public.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);

现在它有经过身份验证的系统，所以我理解它，但为什么它使用 基本功能 以及它在做什么？没看懂。

Answer 1

看起来 Base.js 是 Header 和任何渲染的 children（传递的道具）的容器。这是对单独的逻辑做出反应并使其更具可读性的好习惯。因此，当他将 Base 导入 Public.js 文件时，它将渲染 Header 和他从 public 函数 props.

传递给它的组件。

将其视为布局的骨架，通过导入 Base，它将始终呈现 header 和 header 文件内的任何逻辑，以及他传递给它的任何内容。如您所见，他根据 isAuthenticated 是真还是假将不同的组件传递给它。如果为 false，它们将渲染 Base 并传递一个后备组件 - 这将在 Base 函数内的主标记内渲染。

如何理解 React 文件

How to understand a React file

javascript

laravel

reactjs

react-redux

react-laravel