Functional component name

I'm using:

• "react": "^18.2.0",
• "vite": "^4.1.0",

I need to know a component's name inside the component, or inside the module where the component is defined. The reason I need this is for debug purposes. I want to prefix my log messages with the component's name and I think that putting this manually is clumsy and non-portable.

I saw a lot of answers on SO that simply put do absolutely nothing, many of them referring to class components (because people can't read). One of these, however, refers to React's own documentation here. Granted, this comes under Class Properties, but the text clearly states that "The displayName string is used in debugging messages. Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component. ". Am I misreading this?

After hours trying to fix this, the unsuccessful attempts include:

• setting the name property: failed, because it's read only; also, its value is "".
• setting the displayName property: it's non-portable;
• trying the log function both inside and outside the component's function:

const log = (...a) => console.log(`[${<SOMETHING_THAT_WORKS_PLEASE>}]`, ...a)

As I said, the only thing that I could make work so far is replacing <SOMETHING_THAT_WORKS_PLEASE> with 'componentName'`, which again is really non-portable.

Is there any way to get this name?

從 issue 中連結的 React Component 文件開始，使用 React 18.2.0 和 Vite 4.1.0 重現該問題，同時檢查函式元件內部和外部的情況。文件清楚說明元件名稱在此情境中是否可用，以及適用哪些受支援的除錯指引，即表示完成。