使用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变量作为prop传递给我的index.js文件

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

我如何使用合同变量，以便可以将其用作其他组件中的道具？

Answer 1

contracts未在您的index.js文件中定义。您可以在那里定义合同，也可以将其导入。

然后，您也需要将其传递给App.js的基础组件，例如：

<Content contracts={this.props.contracts} />

（您需要的地方=

Answer 2

此行的index.js文件上出现错误：

 <App contracts={contracts} />

这里没有名为contracts的任何变量，您可能需要在该文件中放置一个变量contracts而不是App.js。

希望这会有所帮助！

Answer 3

您已经在与要使用它的文件不同的文件中定义了合同。在index.js中定义contracts，它将起作用。