时间戳

首页 > 解决方案 > 如何在 React 中将动态值从一个组件传递到另一个组件

reactjs - 如何在 React 中将动态值从一个组件传递到另一个组件

问题描述

我有一个带有包含 onClick 事件的锚标记的导航栏组件。单击时，会将一个值（导航值）传递给函数 Testfunction，该函数是一个单独的组件。我想将 Testfunction 导入到 Content 组件中，以便我可以访问并显示来自 Navbar (navvalue) 的值。如何访问内容中的“导航值”？这是我正在参加的反应课程中的一项作业。我应该使用道具。我不应该使用 state 或 React Route，因为我们还没有达到这些主题。谢谢您的帮助！

这是我的代码：

应用程序.js

import "./styles.css";
import React from "react";
import Navbar from "./Navbar";
import Content from "./Content";
import Testfunction from "./Testfunction";

export default function App() {
  return (
    <div className="App">
      <Navbar onPageChange={Testfunction} />
      <Content />
    </div>
  );
}

导航栏.js

import React from "react";


const Navbar = (props) => {
  const navvalue = "Nav Value";
  return (
    <a
      className="nav-link active text-uppercase"
      aria-current="page"
      href="#"
      onClick={() => props.onPageChange(navvalue)}
    >
      {navvalue}
    </a>
  );
};

export default Navbar;

测试函数.js

const Testfunction = (navvalue) => {
  return navvalue;
};

export default Testfunction;

内容.js

import React from "react";
import Testfunction from "./Testfunction";

const Content = () => {
  const navvalue = Testfunction();

  return (
    <p>Here´s the content. Insert value coming from Navbar here: {navvalue}</p>
  );
};

export default Content;

标签： reactjs

解决方案

要在两者中共享一些状态，<Navbar />您<Content />可以将状态放入它们的父级 -> App。我们还<Navbar />通过 setter 函数来更新父级中的状态。所以它可以是这样的：

import React from "react";

export default function App() {
  const [navValue, setNavValue] = React.useState();

  return (
    <div className="App">
      <Navbar setNavValue={setNavValue} />
      <Content navValue={navValue} />
    </div>
  );
}

const Navbar = ({ setNavValue }) => {
  const value = "Nav Value";
  return <button onClick={() => setNavValue(value)}>{value}</button>;
};

const Content = ({ navValue }) => {
  return (
    <p>Here´s the content. Insert value coming from Navbar here: {navValue}</p>
  );
};

推荐阅读