React useContext实现问题排查：代码无报错但未渲染预期内容

你提到使用useContext传递数据但无法渲染预期内容，以下是代码中的错误点：

错误点说明 #

• 组件名未遵循React规范：React要求组件名首字母必须大写，否则会被识别为原生HTML标签，你的components函数需要改为Components。
• 目标组件不在上下文范围内：你当前直接渲染MyComponent，但它并没有被包裹在konteks.Provider内部，自然无法获取到上下文传递的值。正确的做法是渲染包含Provider的Components组件。

修正后的代码 #

import React from 'react'
import ReactDOM from 'react-dom/client'
import { useContext } from 'react'

const konteks = React.createContext(null);

// 组件名首字母大写，符合React规范
function Components(){
  return(
    <konteks.Provider value="hello world">
      <MyComponent />
    </konteks.Provider>
  );
}

function MyComponent(){
  const getcontext = useContext(konteks);
  return(
    <div>{getcontext}</div>
  );
}
// 注意：通常项目中根元素id为"root"，若你的页面确实使用"body"可保留，建议使用标准root节点
const root = ReactDOM.createRoot(document.getElementById("root"));
// 渲染包含Provider的外层组件，让MyComponent处于上下文范围内
root.render(<Components />);

内容的提问来源于stack exchange，提问作者Apabila X Terkadang