210708 props

propsの使用

前回作ったモデールの「タイトル」を私たちが書いた文章のタイトルに変えたいなら?

function Modal(){
  return(
    <div className="modal">
        <h2>{title[0]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

一見、そうすればいい.
コンパイルエラー
"title"이 없어요App.js(親コンポーネント)のモードは자식 컴포넌트です.
親構成部品は、親構成部品のstateを書き込むために子構成部品を送信する必要があります.=>props構文この場合に必要な

<자식 컴포넌트 작명 = {state명}/>

<Modal 작명 = {전송할 state}></Modal>

> <Modal title={title} ></Modal>

のサブエレメントを使用する後、props 파라미터 입력(サブエレメントから取得)

を使用する.

function Modal(props){
  return(
    <div className="modal">
        <h2>{ props.title[0] }</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

props応用

タイトルをクリックしたときに異なるモードウィンドウが表示される方法は?
いくつかのタイトルをクリックしてstateに保存!!!
UIに関する重要な情報を保存します.
stateに従ってUIを変更します.
故故故

 let [tNumber, setTNumber] = useState(0);

まずStateを作成し、クリックした番号を保存します.
0番目の見出しをクリックします.ステータスは0です.
最初のタイトルをクリックするとstateは1
2番目のタイトルをクリックし、stateは2
に代わる
ただし、この小さいサイズを格納するstateもサブアセンブリで使用するにはpropsが必要です.

function Modal(props){
  return(
    <div className="modal">
        <h2>{ props.title[props.tNumber]}</h2>
        {/* tNumber는 방금 누른 버튼 */}
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

n番目のタイトルでstateをnに変換するにはmap의 파라미터が便利です.このまま

      {
        title.map(function(a, i){
          return (
          <div className = "list">
            <h3 onClick={ ()=>{ setTNumber(i) } }>{ a }<span onClick={()=>{setGood(good+1)}}>👍</span> {good} </h3>
            <p>7월 2일 발행</p>
            <hr/>
          </div>
        )
        }) //title array를 돌면서 반복
      }

[春コート推奨ボタンをクリックした場合]

前回いじめたのは...クリックしたタイトル変数をどのように保存するかという問題を解決しました.haha^^パラメータでi変数を生成するのも簡単で、0から自動的に繰り返されます.