در این قسمت میخواهیم از کامپوننت ها بیشتر صحبت کنیم و یک کامپوننت را در کامپوننت دیگر استفاده کنیم
ما یک کامپوننت تعریف کردیم در فایل فرضی nabvar.js که به صورت زیر می باشد
var NavBar = React.createClass({
render: function () {
var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
var navLinks = pages.map(function(page){
return (
<a href={'/' + page}>
{page}
</a>
);
});
در کد بالایی یک کلاس به نام NavBar در فایل navbar.js تعریف شده است و ما میخواهیم این کامپوننت را در کلاس دیگه استفاده کنیم
حالا ما یک کامپوننت داریم تعریف میکنیم در فایل filePage.js که به صورت زیر هستش
var ProfilePage = React.createClass({
render: function () {
return (
<div>
<NavBar />
<h1>All About Me!</h1>
<p>I like movies and blah blah blah blah blah</p>
<img src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyselfie.jpg" />
</div>
);
اگه دقت کرده باشید در بالا ما از <NavBar /> استفاده کردیم و به این صورت کامپوننت Navbar را در این کلاس خود صدا میزنیم
اما یک نکته ای کد بالا کاملا درست ولی کلاس ProfilePage متوجه NavBar نمیشه !! چرا ؟ چون Navbar در یک فایل مجزا هستش و هیچ ایمپورتی از فایل Navbar.js به فایل profilePage.js داده نشده پس با قرار دادن کد زیر فایل NavBar.js را ایمپورت می کنیم.
var NavBar = require('./NavBar.js');
با کد بالا فایل NavBar.js ایمپورت شد و کلاس ProfilePage شی Navbar را تشخیص می دهد.
چالش : اگر ما بخواهیم فقط از فایل Navbar.js فقط همان کلاس Navbar ایمپورت شود و هیچ فایل دیگه ای همراه نشود باید چیکار کرد ؟
برای این کار باید module.exports استفاده کرد به این صورت هستش که در در طرف فایلی که میخواهیم دسترسی بدهیم که در این جا NavBar.js هستش و میخواهیم فقط به کلاس NavBar دسترسی بدهیم در انتهای فایل کد زیر را قرار می دهیم و در طرف دیگیر باید با استفاده از Require که قبلا هم با آن آشنا شدیم فایل را ایمپورت کنیم به کد زیر دقت کنید
module.exports = NavBar;
حالا در طرف دیگر ProfilePage.js باید Navbar.js را ایمپورت کنیم به صورت کد زیر عمل میکنیم
var NavBar = require('./NavBar.js');
ممنون اطلاعات خوبی بود
ممنون از سایت خوبتون
خیلی عالی و ممنون