freeCodeCamp

4.0 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036181	Introducing Inline Styles	6	false

Description

هناك مفاهيم معقدة أخرى تضيف إمكانات قوية لرمز React الخاص بك. ولكن قد تتساءل عن المشكلة الأكثر بساطة حول كيفية تصميم عناصر JSX التي تقوم بإنشائها في React. من المحتمل أنك تعلم أنه لن يكون بالضبط نفس العمل مع HTML بسبب طريقة تطبيق الطبقات على عناصر JSX . إذا قمت باستيراد أنماط من ورقة أنماط ، فإنها لا تختلف كثيرًا على الإطلاق. يمكنك تطبيق فئة على عنصر JSX باستخدام السمة className ، وتطبيق الأنماط على الفصل الدراسي في ورقة الأنماط. خيار آخر هو تطبيق الأنماط المضمنة ، والتي تكون شائعة جدًا في تطوير ReactJS. يمكنك تطبيق أنماط مضمنة على عناصر JSX مشابهة لطريقة عمل ذلك في HTML ، ولكن مع بعض الاختلافات في JSX. في ما يلي مثال لنمط مضمَّن في HTML: <div style="color: yellow; font-size: 16px">Mellow Yellow</div> تستخدم عناصر JSX سمة style ، ولكن نظرًا لطريقة تشفير JSX ، يمكنك قم بتعيين القيمة إلى string . بدلاً من ذلك ، يمكنك تعيينه يساوي object JavaScript. إليك مثال على ذلك: <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div> لاحظ كيف نحصل على خاصية "fontSize"؟ وذلك لأن React لن يقبل مفاتيح حالة الكباب في كائن النمط. سيطبق React اسم الخاصية الصحيح لنا في HTML.

Instructions

أضف سمة style إلى div في محرر الشفرة لإعطاء النص لونًا أحمر وحجم خط يبلغ 72 بكسل. لاحظ أنه يمكنك تعيين حجم الخط بشكل اختياري ليكون رقمًا ، أو حذف الوحدات "px" ، أو كتابتها كـ "72px".

Tests

tests:
  - text: يجب أن يعرض المكون عنصر <code>div</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === "div"; })(), "The component should render a <code>div</code> element.");'
  - text: يجب أن يكون عنصر <code>div</code> بلون <code>red</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === "red"; })(), "The <code>div</code> element should have a color of <code>red</code>.");'
  - text: يجب أن يكون حجم عنصر <code>div</code> بحجم <code>72px</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === "72" || mockedComponent.children().props().style.fontSize === "72px"); })(), "The <code>div</code> element should have a font size of <code>72px</code>.");'

Challenge Seed

class Colorful extends React.Component {
  render() {
    return (
      <div>Big Red</div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

4.0 KiB Raw Blame History