Web_React #17

8098 ワード

React web テキストリンク

210826
Web_React #17
-App.js

import Dice from './Dice';

function App() {
    return (
      <div>
        <Dice color="blue" />
      </div>
    )
}

export default App;

htmlタグに加えて、このようなDiceコンポーネントに属性を付与することもできます.
React Componentに適用されているので、React Developerツール、Componentタブでチェックして、正常に適用されているかどうかを確認できます.

Reactは、これらのコンポーネントに割り当てられたプロパティをpropsと呼びます.
コンポーネントに割り当てられたプロパティは、コンポーネント関数の最初のパラメータにオブジェクトとして渡されます.
-Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice(props) {
  console.log(props)
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

この道具を利用して
-Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';
import diceRed01 from './assets/dice-red-1.svg';

function Dice(props) {
  const diceImg = props.color === 'red' ? diceRed01 : diceBlue01
  return <img src={diceImg} alt="주사위" />;
}

export default Dice;

画像のアドレスはDiceの色によって変わります.

import Dice from './Dice';

function App() {
    return (
      <div>
        <Dice color="red" />
      </div>
    )
}

export default App;

color値をredに変更
->

このように、prop値に基づいて提示された値を変更することができる.
-Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';

const DICE_IMAGES = {
  blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
  red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06],
}
function Dice(props) {
  const src = DICE_IMAGES[props.color][props.num - 1]
  const alt = `${props.color} ${props.num}`
  return <img src={src} alt={alt} />;
}

export default Dice;

缲り返しアイテム整理

import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';

const DICE_IMAGES = {
  blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
  red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06],
}
function Dice({color = "blue", num = 1}) {
  const src = DICE_IMAGES[color][num - 1]
  const alt = `${color} ${num}`
  return <img src={src} alt={alt} />;
}

export default Dice;

-App.js

import Dice from './Dice';

function App() {
    return (
      <div>
        <Dice color="red" num = {2} />
      </div>
    )
}

export default App;

propsを追加する場合は、数字2を追加するには、カッコを付けなければなりません.

コードを変更することなく、開発者ツールを使用して値を変更できます.

Reference

この問題について(Web_React #17), 我々は、より多くの情報をここで見つけました https://velog.io/@kimhaech/WebReact-17

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

白駿アルゴリズム11557号:Yangjojang of The Year

[react]react基本概念(2)-JSX