freeCodeCamp

4.5 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036182	Add Inline Styles in React	6	false		إضافة أنماط مضمنة في React

Description

ربما لاحظت في التحدي الأخير أن هناك العديد من الاختلافات في بناء الجملة من أنماط HTML المضمنة بالإضافة إلى تعيين سمة style إلى كائن جافا سكريبت. أولاً ، تستخدم أسماء بعض خصائص أنماط CSS حالة الجمل. على سبيل المثال ، تعيين التحدي الأخير حجم الخط مع fontSize بدلاً من font-size . الكلمات الواصلة مثل font-size هي بنية غير صالحة لخصائص كائن جافا سكريبت ، لذا يستخدم React حالة الجمل. وكقاعدة عامة ، تتم كتابة أي خصائص نمط متصل باستخدام حالة الجمل في JSX. من المفترض أن تكون جميع وحدات قيمة قيمة الخاصية (مثل height width fontSize ) في px ما لم يتم تحديد خلاف ذلك. إذا كنت تريد استخدام em ، على سبيل المثال ، يمكنك التفاف القيمة والوحدات بين علامات اقتباس ، مثل {fontSize: "4em"} . بخلاف قيم الطول الافتراضية إلى px ، يجب أن يتم التفاف جميع قيم الخصائص الأخرى بين علامتي اقتباس.

Instructions

إذا كان لديك مجموعة كبيرة من الأنماط ، فيمكنك تعيين object نمط على ثابت للحفاظ على تنظيم التعليمات البرمجية الخاصة بك. uncomment في styles الثابتة وتعلن عن object له ثلاث خصائص النمط والقيم الخاصة بهم. إعطاء div لون "purple" ، حجم خط من 40 ، وحدود من "2px solid purple" . ثم قم بتعيين سمة style تساوي ثابت styles .

Tests

tests:
  - text: يجب أن يكون متغير <code>styles</code> <code>object</code> له ثلاث خصائص.
    testString: 'assert(Object.keys(styles).length === 3, "The <code>styles</code> variable should be an <code>object</code> with three properties.");'
  - text: يجب أن يكون لمتغير <code>styles</code> خاصية <code>color</code> معين بقيمة <code>purple</code> .
    testString: 'assert(styles.color === "purple", "The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.");'
  - text: ''
    testString: 'assert(styles.fontSize === 40, "The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.");'
  - text: ''
    testString: 'assert(styles.border === "2px solid purple", "The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.");'
  - text: ''
    testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a <code>div</code> element.");'
  - text: ''
    testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), "The <code>div</code> element should have its styles defined by the <code>styles</code> object.");'

Challenge Seed

// const styles =
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
    );
    // change code above this line
  }
};

After Test

console.info('after the test');

Solution

// solution required

4.5 KiB Raw Blame History