Как сделать ссылку (href) от одного компонента к другому с помощью хуков, переходя от Навбара к моему компоненту? - PullRequest
Новая
       13

Как сделать ссылку (href) от одного компонента к другому с помощью хуков, переходя от Навбара к моему компоненту?

0 голосов
/ 16 марта 2020

Я хотел бы передать ссылку на компонент, который будет отображаться на той же странице. У меня есть Navbar с ссылками, и я хочу установить href на '.Container-One', на который ссылается другой компонент. Как мне это сделать, если я использую функциональные компоненты React Hooks?

Вот мой Navbar. js 

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(theme => ({
  root: {
      flexGrow: 1
  },
  menuButton: {
      marginRight: theme.spacing(2)
  },
  title: {
      flexGrow: 1
  }
  }));

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

  return (
      <div className={classes.root}>
      <AppBar style={{ backgroundColor: "#343567" }} position="static">
          <Toolbar>
          <Typography variant="h6" className={classes.title}>
              Welcome
          </Typography>
          <Button
              onClick={e => e.preventDefault()}
              href={".Container-One"}
              color="inherit"
          >
              About
          </Button>
          <Button color="inherit">Experience</Button>
          <Button color="inherit">Contact</Button>
          </Toolbar>
      </AppBar>
      </div>
  );
}

Вот мой компонент, который я бы хотел связать тоже. 

import React from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
import styles from "./aboutme.module.css";
import myPhoto from "../../images/me.jpg";
import TrendingUpIcon from "@material-ui/icons/TrendingUp";

function AboutMe() {
  return (
    <div>
      <Container className={styles["Container-One"]}>
          <Typography className={styles["Content-One"]} component="div">
          <h3 className={styles["Container-One-Heading"]}>
              Hello! I'm lorem ipsum. Dont know me? Check me out at call lorem- 
              ipsum
          </h3>
          </Typography>
      </Container>
    </div>
  );
}

export default AboutMe;

Примером этого может быть простой HTML, вы можете передать кнопку с href контейнеру или другому классу или идентификатору HTML на той же странице.

Например: 

<button href="#Container-Three"}>container-three section</button>

Я бы хотел сделать это в реакции, но я использую разные компоненты.

1 Ответ

0 голосов
/ 16 марта 2020

Я смог ответить на этот вопрос сам. Я обнаружил, что если я установлю реквизиты в компоненте, который рендерит оба компонента. Во-первых, компонент ака. Навбар, на котором есть ссылки. Во-вторых, компонент, который отображается внутри того же компонента. Это смутило вас, здесь не беспокойтесь, вот пример.

EX:

Так что для приведенного выше примера это Navbar. js. 

return (
 <div className={classes.root}>
  <AppBar style={{ backgroundColor: "#343567" }} position="static">
    <Toolbar>
      <Typography variant="h6" className={classes.title}>
        Welcome
      </Typography>
      <Button href={props.hreftwo} color="inherit"> //Here I passed props- 
        //accessible from the parent prop
        About
      </Button>
      <Button href={props.hrefthree} color="inherit">
        Experience
      </Button>
      <Button color="inherit">Contact</Button>
    </Toolbar>
  </AppBar>
 </div>
);

This является родительской опорой Home. js.

Пример: 

import React from "react";
import AboutMe from "../components/AboutMe";
import Navbar from "../components/Navbar";

function Home() {
return (
    <div>
    //Below I am passing the hrefs relative to the containers that are shown 
    // in <AboutMe /> section
    <Navbar hreftwo="#Container-Two" hrefthree="#Container-Three" />
    <AboutMe />
    </div>
);
}

export default Home;

Вот так я смог получить доступ к идентификаторам одного компонента, а затем добавить ссылки, которые go, на этот компонент в моем Navbar.

Здесь также есть отличное решение этой проблемы, StackOverflow React-Scroll

...