在不相关的组件之间反应上下文

Question

出于学习目的，我只是尝试呈现这个愚蠢的示例，其中组件A 有一个创建随机数的变量，而另一个（不相关的）组件B 可以使用useContext 呈现它。我不知道如何让上下文的提供者知道该值是来自组件A的变量。

我创建了另一个文件来执行React.createContext()... 但仍然不知道如何使随机数到达那里或App 组件来执行提供程序。我知道我可以在App 组件中创建随机数并提供我想要的具有该值的任何组件，但我只想在组件A 中生成该值并到达组件B。有任何想法吗？也许它太简单了我看不到。

我现在拥有的：

组件 A：

import React from'react';

export default function RandomNumGenerator() {

    const randomNum = Math.random();

    return(
        <h2>Your random number is:</h2>
    )
}

组件 B：

import React from'react';

export default function RandomNumRenderizator() {

    return(
        <h2></h2> //Want to render the random num here
    )
}

应用组件：

import React from 'react';

import RandomNumGenerator from "./FunctionalComponents/RandomNumGenerator/RandomNumGenerator";
import RandomNumRenderizator from "./FunctionalComponents/RandomNumRenderizator/RandomNumRenderizator";
import RandomNumContext from "./contexts/RandomNumContext";


export default function App() {

  return (
    <div>
      <RandomNumGenerator/>
      <RandomNumContext.Provider value={}> //Empty value as I don't know what to send
        <RandomNumRenderizator/>
      </RandomNumContext.Provider>
    </div>
  );
}

还有上下文：

import React from "react";
const RandomNumContext = React.createContext(); //Don't know if there should be anything as defaultValue
export default RandomNumContext;

Answer 1

作为 React 中的data flows down，您希望传递的值必须在上下文提供者的范围内，然后您只需要使用钩子读取上下文值：

export default function App() {
  const randomNum = Math.random();
  return (
    <>
      <RandomNumDisplay num={randomNum} />
      <RandomNumContext.Provider value={randomNum}>
        <RandomNumRenderizator />
      </RandomNumContext.Provider>
    </>
  );
}

export default function RandomNumRenderizator() {
  const randomNum = useContext(RandomNumContext);
  return <h2>{randomNum}</h2>;
}