لا استطيع فهم هذا الجزء (React Native)

عمر سالم2 · 15 مارس 2021

لدي 3 مكونات، ويوجد مكون رابع اسمه Content ولكن لا استطيع فهم الكود بداخله.

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as R from "ramda";

function Loading() {
  return <Text>Loading...</Text>;
}

function NoNewPosts() {
  return (<Text>There are no new posts.</Text>);
}

function Feed() {
  return (
    <Text>Showing posts!</Text>
  );
}

// ???
const Container = (function () {
  return  R.cond([
			[R.prop('loading'), Loading],
			[R.pipe(R.prop('posts'), R.isEmpty), NoNewPosts],
			[R.T, Feed]
		]);
})();

export default function App() {
  return (
    <View>
      <Container posts={[]} loading={false}></Container>
    </View>
  );
}

إسلام عبدالعزيز · 15 مارس 2021

هنا يتم استخدام مكتبة Ramda والتي تعمل على توفير Functional Programming.

الدالة R.cond تقوم بعمل if condition عادية وتتحقق من المصفوفات المعطاه حتى تصل الى قيمة تكون true. على سبيل المثال:

const colorIfCond = R.cond([
	[R.prop('red'), () => console.log('لدينا اللون الاحمر')],
	[R.prop('green'), () => console.log('لدينا اللون الاخضر')],
	[R.T, () => console.log('ليس لدينا اي لون')]
]);

colorIfCond(); // 'ليس لدينا اي لون'
colorIfCond({ red: true }); // 'لدينا اللون الاحمر'
colorIfCond({ green: true }); // 'لدينا اللون الاخضر'

// بدون Ramda سيكون بالشكل التالي
function colorIfCond(obj = {}) {
	if (Object.hasOwnProperty.call(obj, 'red')) {
		console.log('لدينا اللون الاحمر');
		return;
	}

	if (Object.hasOwnProperty.call(obj, 'green')) {
		console.log('لدينا اللون الاخضر');
		return;
	}

	console.log('ليس لدينا اي لون');
	return;
}

R.T هي دالة سوف تقوم بارجاع true دائماً للتاكد من ان الـ condition سوف تقوم بعمل console.log دائماً حتى لو لم يكن هناك اي لون.

لو اردت كتابة الكود التالي بـ React سيكون:

const Container = (props) => {
  if (props.loading) {
    return <Loading />;
  }

  if (props.posts && props.posts.length == 0) {
    return <NoNewPosts />;
  }

  return <Feed />;
}

لا استطيع فهم هذا الجزء (React Native)

السؤال

عمر سالم2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

إسلام عبدالعزيز

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية