如何展示React元件

Question

以下內容是否可以像下面這樣顯示：jsx？

//编写一个返回`jsx`的js函数
function child(label, value){
  return (
    <h3>
     {label}: {value}
    </h3>
  )
}

export default function Parent(){
  const [state, setState] = useState({label:"", value:""})
  const {label, value} = state;
  
  return (
    // 然后调用函数显示`jsx`
    <>{test(label, value)}</>
  )
}

或是否更好的做法是編寫React函數元件：

function Child({state}){
  return (
    <h3>
     {state.label}: {state.value}
    </h3>
  )
}

export default function Parent(){
  const [state, setState] = useState({label:"", value:""})
  
  return (
    <Child state={state} />
  )
}

Answer 1

第二種方法看起來更簡單和可讀。記住，你讓程式碼更可讀，專案變得越大，它就越容易管理。此外，這種方法是建立React元件最常見的做法。

Answer 2

最佳實踐是將其渲染為一個React元件。

原因是，雖然僅使用函數對於非常簡單的元件仍然可行，但您可能希望在將來對其進行更改並添加更多「類似React」的功能，例如hooks。在那時，它可能會出現問題，而React通常不會告訴您這是導致應用程式出錯的原因。如果發生這種情況，要找到錯誤可能會很頭疼，特別是如果函數位於另一個檔案中。

在這篇文章中可以找到一個範例，說明在使用錯誤邊界時它可能會出錯。

根據這個Stack Overflow回答，以函數呼叫的方式可能在效能方面更快，但在我看來，在這種情況下根本不使用函數是更安全的選擇。

所以，如果您認為自己足夠小心，沒有人會阻止您。但請確保不要自己給自己找麻煩。祝好運！