如何在ReactDOM.render调用时为Hello组件设置name属性变量

你只需要在调用Hello组件时，直接在组件标签上添加name属性传入对应值即可，修改后的ReactDOM.render代码如下：

ReactDOM.render(
    <Hello name="这里替换为你要传入的实际name值" />,
    document.querySelector('#root')
)

如果name值是存储在变量里的，用大括号包裹变量传入即可：

const customName = "张三";
ReactDOM.render(
    <Hello name={customName} />,
    document.querySelector('#root')
)

补充说明：

• 你定义的HelloProps接口已经明确了name是可选字符串类型，TS会自动校验你传入的值是否符合类型要求，如果传入非字符串类型的值会在编译阶段报错。
• 如果你不传name属性，组件会按照你写的空值合并逻辑，默认展示Mr. Unknown，符合预期。

内容的提问来源于stack exchange，提问作者sunjiayang