ReactJs 中如何将一个值从一个组件传递到另一个组件？

Question

我知道如何将数据从父组件传递到子组件，但如何将数据传递到独立组件？

例如，假设我们有一个具有此名称的组件：在测试组件中进行测试，我们有一个值，如何将该值传递给另一个组件而不将其包含在第一个组件上？

我在这里写了我的代码的简化版

import {useState} from 'react';

const Test = () => {
    const [x,setX] = useState(0);


    const handleClick = () => {

        setX(x+1);
  
        };
    console.log(x);

    return(
    <div><div  onClick={handleClick} ref={ref}></div></div>
    )
}
export default Test;

在上面的代码中，我有一个值，他的名字是 x ，我在下面写了另外两个组件

const Exit = () => {


    return(
<div>
    <p>Exit sec</p>
    <Score />
</div>)
}

export default Exit;

上面的组件有一个子组件，他的名字是 Score，退出组件是站点的标题

const Score = () => {

   return(
    <div><p style={{color:"white"}}>YOUR SCORE IS {i want to put x value here} </p></div>
   )
}

export default Score;

请查看上面我在 {} 中编写的代码，我想在此处放置并显示 x 值。那么我该怎么做呢？

最后我将这些添加到index.js，如下代码

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
    <Exit/>

    <Routes> 
      <Route path='/' element={<Test />} />  

    </Routes>
  </Router>
  </React.StrictMode>
);

Answer 1

有多种方法可以在独立组件之间移动数据。其中包括创建 React 上下文或使用全局状态管理库（例如 redux）。当我看到你的情况时，似乎创建上下文就足够了。我在下面留下了有关如何创建上下文的文档。

文档：https://react.dev/reference/react/useContext