نگاهی به props

شاید بدونید که props مخفف properties است.

خوب حالا چه جوری استفاده می کنیم از؟!

توی فانکشن طور به شکل زیر

import React from "react"
const Headers = propss => {
return (
<div>
<h1>{propss.brand}</h1>
</div>
);
};
export default Headers;

و توی app.js مون هم به شکل زیر

import React from "react"
import Cont from "./component/Cont"
import Headers from "./component/header"
function App() {
const name = "react"
return (
<div>
<Cont />
<Headers brand="taha1" />
</div>
);
}
export default App;

خوب تو کلاس کامپوننت ها هم به شکل زیر عمل می کنیم

import React from "react"
import Cont from "./component/Cont"
import Headers from "./component/header"
function App() {
const name = "react"
return (
<div>
<Cont name="taha" email="taha@gmail.com" phone="09124805683" />
<Headers brand="taha1" />
</div>
);
}
export default App;

و در اون :

import React, { Component } from "react"
class Cont extends Component {
render() {
return (
<div>
<li>
<ul>email = {this.props.email}</ul>
<ul></ul>
<ul></ul>
</li>
</div>
);
}
}
export default Cont;

و همینطور می تونیم به شکل زیر هم استفاده کنیم:

import React, { Component } from "react"
class Cont extends Component {
render() {
const { name, email } = this.props;
return (
<div>
<h4>{name}</h4>
<li>
<ul>email = {email}</ul>
<ul></ul>
<ul></ul>
</li>
</div>
);
}
}
export default Cont;

فانکشن رو هم می تونیم به شکل زیر باز نویسی کنیم :

import React from "react"
const Headers = propss => {
const { brand } = propss;
return (
<div>
<h1>{brand}</h1>
</div>
);
};
export default Headers;