如何理解React文件

Question

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

我知道我不能这样做，因为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);

页眉.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;

拆分.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和任何渲染子级(传递的道具(的容器。这是一个很好的做法，可以对单独的逻辑做出反应，使其更可读。因此，当他将Base导入Public.js文件时，它将呈现Header和他从公共函数props传递给它的组件。

把它想象成布局的骨架，通过导入Base，它将始终呈现头文件和头文件中的任何逻辑，以及他传递给它的任何逻辑。正如你所看到的，他将根据isAuthenticated是true还是false向它传递不同的组件。如果为false，则它们将呈现Base并传递回退组件——这将在Base函数的主标记内部呈现。