4.0 KiB
4.0 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036181 | Introducing Inline Styles | 6 | false |
Description
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