React：如何将值传递给我的主 App() 函数

Question

我有一个 React 应用程序，我想将一个值（“groupId”）传递给主要的应用程序组件。

我的应用程序组件定义为 function App()。我尝试使用以下方式传递参数值：

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import './scss/index.scss';
import App from './App';

const targetDivName= 'myapp-ui';
const targetDiv = document.getElementById(targetDivName);
const groupId: string = targetDiv?.getAttribute("data-group-id") ?? '';

ReactDOM.render(
  <React.StrictMode>
    <App groupId={ groupId } />
  </React.StrictMode>,
  targetDiv
);

App.tsx:

import React from "react";
import { Box } from "./components/Box";
import styles from './scss/App.module.scss';

function App(groupId: string) {
    return (
        <div className={ styles.orchestratorUi }>
          <Box groupId={ groupId } />
        </div>
    );
}

export default App;

但这会产生以下错误（编译和运行）：

Type '{ groupId: string; }' is not assignable to type 'string'.ts(2322)

如何通过我的 App() 将 HTML 代码中的值传递到主要组件（本例中为 Box）。

Answer 1

道具作为对象传递，因此更改

function App(groupId: string) {

到

//                    vvvvvvvvvvvvvvvvvvv−−−−−− declaring the type of props
function App({groupId}: {groupId: string}) {
//           ^^^^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−− using destructuring

将 App 的第一个参数声明为 {groupId: string} 类型，并使用解构从 props 中获取 groupId。

Answer 2

你需要改变

function App(groupId: string) {

至

function App({groupId}: any) {

甚至更好

interface Props {
  groupId: string
}

function App({ groupId }: Props) {

您的代码发生的情况是，typescript 将 function App(groupId: string) { 中的 groupId 解释为 string 类型，而是在您实例化 App 时接收一个对象。

在您的例子中，此对象是 {"groupId": groupId}，其中 groupId 是您在 App.tsx 中分配的变量。

Answer 3

你的索引很好，你的主要组件应该是这样的：功能应用程序（道具）{ . . . .

Answer 4

那是因为 React 组件接受 props 作为对象。

首先，需要像这样从 props 对象中获取 groupId：

function App({ groupId }) {

Here 您可以找到函数组件的类型。

因此 App 组件接受的定义 props 的正确方法是：

import React from "react";
import { Box } from "./components/Box";
import styles from './scss/App.module.scss';

interface AppProps {
  groupId: string;
}

// React.FC is an alias for React.FunctionComponent
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v16/index.d.ts#L544
const App: React.FC<AppProps> = ({ groupId }) => {
  return (
    <div className={ styles.orchestratorUi }>
      <Box groupId={ groupId } />
    </div>
  );
};

export default App;

React：如何将值传递给我的主 App() 函数

React: How can I pass a value to my main App() function

typescript

reactjs

create-react-app

react-component