React：将参数传递给使用放大的渲染组件

Question

我对 React 还很陌生，并且遇到了问题。我有一个 index.tsx，它呈现 App 组件如下。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {initialize} from './util/initialize';

initialize().then(settings => {
    ReactDOM.render(<App settings={settings}/>, document.getElementById('root'));
});    

serviceWorker.unregister();

App.tsx

import React from "react";
import Search from "./search/Search";
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

import "./App.css";

function App(settings : any) {
    return (
      <div className="App">
        <AmplifySignOut />
        <Search indexId={settings.ID!} region={settings.REGION!}/>
      </div>
    );
}

export default withAuthenticator(App);

我正在尝试将设置对象从 index.tsx 传递到 App 组件，但我不断收到错误

Type '{ settings: any; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.

Answer 1

settings 被用作 index.tsx 文件中的道具。 App 将接受一个参数（通常称为props），它是一个包含所有道具的对象。试试这个，看看它是否对你有帮助：

function App({settings}: {settings: any}) {