Передача данных из одного компонента в другой, используя ReactJS

Question

У меня в приложении следующее: js

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

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

export default App;

Я пытаюсь передать переменную контрактов в качестве опоры в моем индексе. js file

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

Вам необходимо переместить массив контрактов из приложения. js в индекс. 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";

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

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

Answer 2

вам нужно экспортировать контракты

Демо

Приложение. js

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

index. js

import App,{contracts} from "./App";

В лучшую сторону. уже в app.js. так что вы можете получить доступ с помощью в приложении. js. Нет необходимости передавать с index.js

Answer 3

Ошибка появляется в файле index.js в этой строке:

 <App contracts={contracts} />

здесь у вас нет никакой переменной с именем contracts, вам может потребоваться поместить переменную contracts в этот файл вместо App.js.

Надеюсь, это поможет!

Answer 4

Вы определили контракты в файле, отличном от того, в котором вы пытаетесь его использовать. Определите contracts в индексе. js, и он будет работать.

Answer 5

contracts не определен в вашем файле индекса. js. Либо вы определяете там контракты, либо импортируете их.

И затем вам нужно передать его базовым компонентам в приложении. js, например:

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

(для каждого компонента, в котором он вам нужен.) Почему Вы пытаетесь передать это в index.js вообще?