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

Question

我有两个 .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 的值。如何实现？

Answer 1

您可以将回调从 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 : []);
      }}
  />
);
}

沙盒link视觉效果here。

希望对您有所帮助。

Answer 2

您可以在组件 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，因为组件名称首字母应大写。

Answer 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 and example on codesandbox 的更多信息。

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

How to pass value of a const from one .js file to another in React JS?

jsx

reactjs

react-functional-component

use-state

伪代码

一个

B

B.js

A.js

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

How to pass value of a const from one .js file to another in React JS?

jsx

reactjs

react-functional-component

use-state

伪代码

一个

B

B.js

A.js

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