Как передать значение const из одного. js файла в другой в React JS?

Question

У меня есть два. js файла, в которых я определяю два разных компонента: A. js и B. js. У меня есть константа с именем value, определенная в B. js, которая использует хук 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/>
  );
 }

Я хочу получить доступ к значению const value, определенному в B. js в A. js. Как этого добиться?

Answer 1

Вы можете определить функцию обратного вызова в компоненте A, которая получает значение от B.

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

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

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

Теперь в вашем B вы должны вызвать ту функцию обратного вызова, которую вы передали в реквизит от компонента A, и передать любое значение Вы хотите передать.

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

Примечание: также измените свой import clickcomponent на import Clickcomponent, так как в именах компонентов первая буква должна быть заглавной.

Answer 2

Этого можно добиться, подняв состояние компонента 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;

Здесь подробнее о поднятии состояния и примере codesandbox .

Answer 3

Вы можете передать обратный вызов от A до B, где A может иметь полный доступ к компоненту, в то время как B все еще имеет возможность доступа к нему. Это делается с помощью концепции реквизита в реакции.

Псевдокод

A

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 : []);
      }}
  />
);
}

Ссылка песочницы для визуального эффекта здесь .

Надеюсь, это поможет.