freeCodeCamp

4.6 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 переполнен, вы можете 't установить значение в string . Вместо этого вы устанавливаете его равным object JavaScript. Вот пример: <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div> Обратите внимание, как мы camelCase свойство fontSize? Это связано с тем, что React не будет принимать ключи кебаба в объекте стиля. React применит правильное имя свойства для нас в HTML.

Instructions

Добавьте атрибут style в div в редакторе кода, чтобы придать тексту цвет красного и размер шрифта 72px. Обратите внимание, что вы можете указать размер шрифта как число, опустив единицы «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.6 KiB Raw Blame History Unescape Escape