带参数的函数不会显示

Question

目标：
允许使用参数值为“Test 2”的函数 Test2，然后无误地显示。

问题：
当我应用代码“”时，它显示一条错误消息

“对象作为 React 子项无效（已找到：具有键 {thename} 的对象）。如果您打算呈现子项集合，请改用数组。”

我缺少代码的哪一部分？

Stackblitz：
https://stackblitz.com/edit/react-ts-atrrsi?

信息：
*ReactTS 新手

谢谢！

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

export default function App() {
  function Test1() {
    return <h1>Test 1 works!</h1>;
  }

  function Test2(thename: string) {
    return <h1>{thename} works!</h1>;
  }

  return (
    <div>
      <Hello name={'sdf'} />
      <Test1 />
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

render(<App />, document.getElementById('root'));

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>;

Answer 1

你传递给react组件的props是在一个对象中传递的。您需要按如下方式从对象访问它们。

function Test2(props) {
    return <h1>{props.thename} works!</h1>;
}

带参数的函数不会显示

Function with argument won't display

react-tsx