Поскольку в прошлом уроке мы начали обсуждение реквизита, давайте углубимся в более сложную версию реквизита.
Разделить компоненты
Даже компоненты могут увеличиваться в размерах, и чтобы справиться с этим, мы можем разделить их на более мелкие единицы.
добавьте этот код в файл App.js
import './App.css';
import React from 'react';
import Welcome from './components/welcome';
const university = { //line 1
text:'Hey, I am in University',
school: {
name: 'UBC',
country: 'Canada'
}}
function App() {
return (
<div className="App">
<Welcome k={university}/> //line 2
</div>
);
}
export default App;
строка 1: здесь мы определяем объект под названием университет, чтобы было проще поместить все данные в одно место. университетский объект содержит текст и школу, сама школа является объектом, который содержит имя и страну в качестве свойств.
строка 2: мы объявляем элемент Welcome с k в качестве реквизита, в котором хранится объект университета.
добавьте этот код в файл welcome.js
import React from 'react';
function Welcome(props){
return(
<div className="main">
<div className="mid-1">
<p>{props.k.text}</p> //line 1
</div>
<div className="mid-2">
<p>{props.k.school.name}</p> //line 2
</div>
<div className="mid-3">
<p>{props.k.school.country}</p> //line 3
</div>
</div>
)}
export default Welcome
строка 1: внутри этого тега div мы печатаем текст внутри нашего университетского объекта с помощью реквизита. Мы делаем то же самое для строки 2 и строки 3.
Вывод
мы узнали, как мы можем использовать реквизиты в компоненте React и как данные передаются из welcome.js в App.js. В следующих уроках мы увидим, как уменьшить размер компонентов, когда они станут больше.
