2

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

B.js

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

js

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

我想value在 A.js 中访问 B.js 中定义的 const 的值。如何做到这一点？

4

3 回答 3

3

您可以在组件 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因为组件名称的第一个字母应该是大写的。

于 2020-04-05T11:04:23.483 回答
0

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

乙

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

视觉效果的沙盒链接在这里。

我希望这有帮助。

于 2020-04-05T10:52:07.040 回答
0

您可以通过提升组件 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;

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;

这是有关提升状态的更多信息以及有关代码和框的示例。

于 2020-04-05T11:14:05.313 回答