Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

3.5 KiB

Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036181	インラインスタイルを導入する	6	301395	introducing-inline-styles

--description--

他にも、React のコードに強力な機能を追加する複雑な概念があります。しかし、もっと単純な問題として、React で作成した JSX 要素のスタイルをどのように設定するのでしょうか？ JSX 要素にクラスを適用する方法があるので、HTML の場合とまったく同じではないことは理解していると思います。

スタイルシートからスタイルをインポートする場合は、それほど違いはありません。 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 はスタイルオブジェクトでケバブケースのキーを受け付けないためです。 React によって正しいプロパティ名が HTML に適用されます。

--instructions--

コードエディターで、div に style 属性を追加し、テキストに赤色を付けて、フォントサイズを 72px にしてください。

フォントサイズは数値でも設定できます。単位 px を省略するか、72px と記述してください。

--hints--

コンポーネントで div 要素をレンダーします。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
    return mockedComponent.children().type() === 'div';
  })()
);

div 要素の色を red にします。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
    return mockedComponent.children().props().style.color === 'red';
  })()
);

div 要素のフォントサイズを 72px にします。

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'
    );
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<Colorful />, document.getElementById('root'))

--seed-contents--

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

--solutions--

class Colorful extends React.Component {
  render() {
    return (
      <div style={{color: "red", fontSize: 72}}>Big Red</div>
    );
  }
};

3.5 KiB Raw Permalink Blame History