javascript - 使用 ReactJS 将数据从一个组件传递到另一个组件

Question

我在 App.js 中有以下内容

let contracts = [
 {
   id: "1",
   name: "Lloyds",
   image: ""
 }
];

class App extends Component {
 render() {
   return (
     <div>
       <Header />
       <Search />
       <ContractsList />
       <Content />
       <Footer />
     </div>
   );
 }
}

export default App;

我正在尝试将contracts变量作为我的index.js文件中的 Prop 传递

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap-grid.css";

ReactDOM.render(
 <React.StrictMode>
   <App contracts={contracts} />
 </React.StrictMode>,
 document.getElementById("root")
);

但不断收到以下错误:

 Line 10:21:  'contracts' is not defined  no-undef

我如何使用contracts变量，以便它可以用作其他组件中的 Prop ？

Answer 1

您需要将契约(Contract)数组从 app.js 转移到 index.js，然后将其作为 props 传递。

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap-grid.css";

let contracts = [
 {
   id: "1",
   name: "Lloyds",
   image: ""
 }
];

ReactDOM.render(
 <React.StrictMode>
   <App contracts={contracts} />
 </React.StrictMode>,
 document.getElementById("root")
);