اذهب إلى المحتوى
  • 0

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

عمر سالم2

السؤال

لدي 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>
  );
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

هنا يتم استخدام مكتبة 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 />;
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...