如何在 React JS 中将 const 的值从一个 .js 文件传递到另一个文件？答案

【问题标题】：How to pass value of a const from one .js file to another in React JS?如何在 React JS 中将 const 的值从一个 .js 文件传递到另一个文件？
【发布时间】：2020-07-17 08:34:40
【问题描述】：

我有两个 .js 文件，我在其中定义了两个不同的组件：A.js 和 B.js。我在 B.js 中定义了一个名为 value 的常量，它使用 UseState 钩子，所以当我尝试将 import B 放入 A.js 我想访问 B.js 中定义的一个常量。为了更清楚，这是我的代码。

B.js

import clickcomponent from ".../..xxx"
export function B(){
...
...
const[value, setvalue]= useState("");
...
...
return(
 <clickcomponent
    ...
    ...
    onClick={newValue => {
        setvalue(newValue ? newValue : []);
      }}
  />
);
}

A.js

import B from "B.js"
export default function A(){
...
...
return (
    <B/>
  );
 }

我想在 A.js 中访问 B.js 中定义的 const value 的值。如何实现？

【问题讨论】：

标签： reactjs jsx react-functional-component use-state

【解决方案1】：

您可以在组件 A 中定义一个回调函数，从 B 接收值。

import B from "B.js"
export default function A(){

const receiveValue = (value) => {console.log("value received from B",value)}

return (
 <B receiveValue={receiveValue} />
);
}

现在在你的 B 中，你必须调用你从 A 组件传入 props 的回调函数，并传递你想要传递的任何值。

import Clickcomponent from ".../..xxx"
export default function B(props){
return(
  <Clickcomponent onClick={() => {
    props.receiveValue(5);
  }}
 />
);

注意：还要将import clickcomponent 更改为import Clickcomponent，因为组件名称的第一个字母应该是大写的。

【讨论】：

在控制台显示：从 B[object Object] 收到的值
是的，因为在组件 B 中我们正在传递对象。我已经更新了代码，现在我传递了数字 5。现在它将传递给组件 A 并显示在控制台中。
是的，它只是一个可以在其中放入任何代码的函数。
我刚刚做了 console.log 来显示 A 收到了值。
你可以在这个函数中做任何事情。

【解决方案2】：

您可以将回调从 A 传递给 B，其中 A 可以完全访问组件，而 B 仍然可以访问它。这是通过 react 中的 props 的概念来完成的。

伪代码

一个

import B from "B.js"
export default function A() {
...
const[value, setvalue]= useState("");
return (
    <B callback={(value) => setvalue(value)}/>
  );
 }

B

import clickcomponent from ".../..xxx"
export default function B(props){
...
...
return(
 <clickcomponent
    ...
    ...
    onClick={newValue => {
        props.callback(newValue ? newValue : []);
      }}
  />
);
}

视觉效果的沙盒链接here。

我希望这会有所帮助。

【讨论】：

这只是帮助你的伪代码。我现在附上一个沙盒链接。

【解决方案3】：

您可以通过提升组件 B 的状态来实现此目的。

B.js

import React, { useState } from "react";

const B = ({ liftingStateUpHandler }) => {
  const [value, setValue] = useState("You got me");

  return (
    <button onClick={() => liftingStateUpHandler(value)}>
      Click me to lift state up
    </button>
  );
};

export default B;

A.js

import React, { useState } from "react";
import B from "./B";

const A = () => {
  const [stateA, setStateA] = useState("");

  const getState = value => setStateA(value);

  return (
    <>
      <div>State from component B: {stateA}</div>
      <B liftingStateUpHandler={getState} />
    </>
  );
};

export default A;

这里有更多关于lifting state up 和codesandbox 的示例。

【讨论】：