Styled Componentsを利用したReactでの条件付きレンダリングにおけるpropsの使用

Propsは条件付きレンダリングにも使用できます。前回のレッスンで扱ったReactコンポーネント Blockを使用しましょう。

最初の入力フィールドの背景を黄色に、他の入力フィールドの背景を緑色にするようにします。そのためには、コンポーネント Input のスタイルにもう一行追加します。結果は以下のようになります：

Block.jsconst Input = styled.input`
  background: ${(props) => (props.first ? 'yellow' : 'green')};

  margin: 5px;
  font-size: 18px;
`;

最初の入力フィールドに prop first を追加します：

Block.js<Container>
  <Input first />
  <Input placeholder="name" type="text" />
  <Input type="password" />
</Container>

Задание 1

レッスンの理論で説明された条件付きレンダリングを使用して、前回のレッスンの課題の解答コードを修正してください。 prop warn が存在する場合、ボタンのテキストを赤色に、背景を黄色にします。存在しない場合は、背景を緑色に、テキストを白色にします。 2番目のボタンに warn を渡してください。