时间戳

首页 > 解决方案 > React：如何将值传递给我的主 App() 函数

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

问题描述

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

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

索引.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
);

应用程序.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在本例中）。

标签： reactjstypescriptcreate-react-appreact-component

解决方案

道具作为对象传递，所以改变

function App(groupId: string) {

至

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

这将第一个参数声明为Apptype {groupId: string}，并groupId使用解构从道具中获取。

推荐阅读