نگاهی به props

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

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

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

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

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

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

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

import React from &quotreact"
import Cont from &quot./component/Cont"
import Headers from &quot./component/header"
function App() {
const name = &quotreact"
return (
<div>
<Cont name=&quottaha&quot email=&quottaha@gmail.com&quot phone=&quot09124805683&quot />
<Headers brand=&quottaha1&quot />
</div>
);
}
export default App;

و در اون :

import React, { Component } from &quotreact"
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 &quotreact"
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 &quotreact"
const Headers = propss => {
const { brand } = propss;
return (
<div>
<h1>{brand}</h1>
</div>
);
};
export default Headers;