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}) {

React：传递参数以放大渲染组件

1 个答案: