如何使用 React Component 使用 JSX 賦值

Question

我正在嘗試從反應組件NameField中獲取值，以將其作為命名值傳遞到 object 中，但它不起作用，我似乎遺漏了一些東西。 我如何從 React 組件中獲取值並將其作為值傳遞給 JS 表達式（已經在 JSX 中）。

return (
.....
    <DataTable items={[{id: 0, Name: <NameField/>}]}</DataTable>
)

我收到以下錯誤

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'FiberRootNode'
    |     property 'containerInfo' -> object with constructor 'HTMLDivElement'
    |     property '__reactContainer$2bh06agxh4m' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle

這是NameField的內容

function NameField() {
  return (
    <>
      ABC
    </>
  );
}
export default NameField;

Answer 1

我不認為你做這樣的單行。 嘗試：

const Component = ({ props }) => {
  
  // Before return
  const payload = []

  return (
    .....
    {
      payload.push({
        id: 0, 
        name: <NameField/>
      })
    }
    <DataTable items={ payload }/>
  )
}