如何让 React Component 能够接收变量

Question

我正在尝试创建一个 React 组件并在 ReactDOM 代码中调用它时传递一个字符串变量。

tableInfoById.tsx

const TableInfoById: NextPage = (name: string) => {

    return (
        <div id="TableHolder" style={{marginTop: 30}} className={styles.grid} >
            <h1>Table {name}</h1>
        </div>
    )
}

export default TableInfoById

index.tsx

        <div className={styles.container}>
            <main className={styles.main}>
                <TableInfoById name={"test name"} />
            </main>
        </div>

I am receiving an error saying that the ```name: any``` type is not assignable to the type 'IntrinsicAttributes & { children?: ReactNode; }'.

Which is the right way to pass the name variable to the JSX component?

Answer 1

添加一些花括号，你应该可以开始了！

const TableInfoById: NextPage = ({ name }: { name: string }) => {
  return (
    <div id="TableHolder" style={{ marginTop: 30 }} className={styles.grid}>
      <h1>Table {name}</h1>
    </div>
  )
}

export default TableInfoById

如何让 React Component 能够接收变量

How to turn React Component able to receive variables

reactjs

react-dom