代码之家 › 专栏 › 技术社区 › HelloWorld1

不显示带参数的函数

react-tsx

0

HelloWorld1 · 技术社区 · 4 年前

目标:

当我应用代码“<Test2 thename={'Test2'}/>”时,这是一个错误的说法

对象作为React子对象无效(找到:具有键{thename}的对象)。如果要呈现子对象的集合,请改用数组

我遗漏了代码的哪一部分?

闪电战:
https://stackblitz.com/edit/react-ts-atrrsi ?

*反应中的新手

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>;

1 回复 | 直到 4 年前

1

0

K450 4 年前

传递给react组件的道具在对象中传递。您需要从对象访问它们,如下所示。

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