显示另一个文件中的组件时出现问题 onclick

Question

我目前正在使用 React 构建一个带有导航栏的网站，我使用 Material-UI。

我的问题是，例如，当我在导航栏中单击“关于”时，我想在 About 中显示内容/组件，而当我单击 Home 时，我希望显示组件 Home 而隐藏其他组件。

问题是我仍然是 React 的初学者，想练习我的 React 技能，现在我有导航栏、主页、关于在单独的文件中，不知道在这种情况下如何通过状态、道具等。

我将在网站上显示一个屏幕截图，并使用 code-sn-ps 来显示我目前的代码。

我的网站：

我的程序的文件结构：

这是代码：

App.js：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import NavBar from './Components/Navigationbar'
import Home from './Components/Home'
import About from './Components/About'


class App extends Component {

  constructor(props){
    super(props);
    this.state = {showAbout: true};

    this.handleAbout = this.handleAbout.bind(this);
  }

  handleAbout(){
    this.setState({showAbout: true})
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">

        </div>
        <NavBar></NavBar>
        <p className="App-intro">
        <Home></Home>

        </p>
        {this.state.showAbout ? <About /> : null}
      </div>
    );
  }
}

export default App;

Home.jsx：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
    backgroundColor: 'mistyrose'
  },
}));

export default function PaperSheet() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.root}>
        <Typography variant="h5" component="h3">
          Home
        </Typography>
        <Typography component="p">
          Welcome Home
        </Typography>
      </Paper>
    </div>
  );
}

关于.jsx：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
    backgroundColor: 'mistyrose'
  },
}));

export default function PaperSheet() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.root}>
        <Typography variant="h5" component="h3">
          About
        </Typography>
        <Typography component="p">
          About
        </Typography>
      </Paper>
    </div>
  );
}

最后是来自 Material UI 的导航栏： Navigationbar.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
import App from '../App';

import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

import About from './About';



const useStyles = makeStyles({
  root: {
    flexGrow: 1,
  },
});

  function handleAbout(props){
    alert('About');
  }

const navBar = (props) => {
  return (
    <Paper >
      <Tabs
        //value={value}
        onChange={handleChange}
        indicatorColor="primary"
        textColor="primary"
        centered
      >
        <Tab label="Home" />
        <Tab label="About" onClick={() => handleAbout(props)} />
        <Tab label="Contact" />
      </Tabs>
    </Paper>
  );
}

//ReactDOM.render(<navBar />, document.querySelector('#app'));

export default navBar;

我的问题是当我点击导航栏中的“关于”时，我想在我的网站上显示关于组件（About.jsx 中的内容），但不确定如何处理这种情况下的状态和道具当它们在单独的文件中时。

如果有人可以帮助我，将不胜感激。 非常感谢。

Answer 1

您可以使用 react-router 进行导航。如何安装和使用它在页面上显示得非常好：https://reacttraining.com/react-router/web/guides/quick-start

Answer 2

哦，男孩，这是一个大...

在最简单的情况下，您可以通过如下方式传递状态：
<ChildComponent showAbout={this.state.showAbout}/>，然后通过props.showAbout（或this.props.showAbout，如果它是类组件）在ChildComponent 中访问它。

但是随着应用程序的扩展，事情会变得复杂。值只能在组件树内部通过 props 向下传递；换句话说，一个组件只能看到它上面某处的状态。您不能使用来自同级组件或其下方组件的状态。

这就是状态管理库存在的全部原因。它们提供了一个“全局”状态，可以在应用程序的任何地方使用。 Redux 就是其中之一。

您应该坐下来学习 Redux，因为如果没有状态管理工具，您将无法真正制作出大型应用程序。

你应该学习的另一件事是 react-router，用于客户端路由。

这些东西结合起来将提供一个强大的工具来制作有用的应用程序。