freeCodeCamp

3.2 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036181	Introducing Inline Styles	6	false		介绍内联样式

Description

还有其他复杂的概念可以为您的React代码添加强大的功能。但是你可能想知道如何设置你在React中创建的那些JSX元素的更简单的问题。您可能知道它与使用HTML完全不同，因为您将类应用于JSX元素的方式。如果从样式表导入样式，它就没有太大的不同。使用className属性将类应用于JSX元素，并将样式应用于样式表中的类。另一种选择是应用内联样式，这在ReactJS开发中非常常见。您将内联样式应用于JSX元素，类似于您在HTML中的操作方式，但有一些JSX差异。以下是HTML中内联样式的示例： <div style="color: yellow; font-size: 16px">Mellow Yellow</div> JSX元素使用style属性，但由于JSX的转换方式，您可以不要将值设置为string 。相反，您将其设置为等于JavaScript object 。这是一个例子： <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>注意我们如何使用“fontSize”属性？这是因为React不接受样式对象中的kebab-case键。 React将在HTML中为我们应用正确的属性名称。

Instructions

在代码编辑器中为div添加style属性，为文本提供红色和字体大小为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: ''
    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

3.2 KiB Raw Blame History Unescape Escape