210709 React Router(3)

15801 ワード
テキストリンク

データをDetail構成部品にバインドする

  • Detailコンポーネントラベルに渡すデータを宣言し、
    • を宣言します.
    <Detail shoes={shoes}/>
  • detail.js(Detailコンポーネントがある場所)では、propsを使用してデータを受信します.
    • function Detail(props){
  let history = useHistory();
  return(
    <div className="container">
    <div className="row">
      <div className="col-md-6">
        <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
      </div>
      <div className="col-md-6 mt-4">
        <h4 className="pt-5">{props.shoes[0].title}</h4>
        <p>상품설명</p>
        <p>120000원</p>
        <button className="btn btn-danger">주문하기</button>
        <button className="btn btn-danger" onClick={()=>{history.goBack()}}>뒤로가기</button>
      </div>
    </div>
  </div>
  )
}
    App.jsで靴データを作成しない
    detail.jsで靴のデータを作ればいいと思います.
    ただし、できるだけ最上位コンポーネントにデータを格納することをお勧めします.

    URLパラメータを使用した複数ページの作成


    要求事項:/detail/n登録の場合は、n番目の商品を提示してください!(nは数字)
     <Route path="/detail/:id">
    :id:urlのパラメータ
    パラメータなので、コロンの後ろに自由に名前を付けることができ、複数使用できます.
    簡単に言えば、:idビットに任意の文字を入力すると、Detail要素が表示されます.
    URL接続ごとに異なる商品を展示したい場合はuseParams() hookを使用しますuseParams():現在のURLのパラメータ{パラメータ1,パラメータ2}を格納する関数
    function Detail(props){
  let history = useHistory();
  let { id } = useParams();  //이렇게 받아옴
  return(
    <div className="container">
    <div className="row">
      <div className="col-md-6">
      <img src={'https://codingapple1.github.io/shop/shoes' + (Number(id)+1) + '.jpg'} width="100%" />
      </div>
      <div className="col-md-6 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[id].content}</p>
        <p>{props.shoes[id].price}</p>
        <button className="btn btn-danger">주문하기</button>
        <button className="btn btn-danger" onClick={()=>{history.goBack()}}>뒤로가기</button>
      </div>
    </div>
  </div>
  )
}
    ++写真も違うところに置こうと修正しました私はid+1と言っていましたが、ずっとエラーで、idが文字で受信されているせいか整数演算ができないのでnumber()で整数に変えたと思います.
    Hookが何であるかを知る
    しかし問題は、靴のデータの順序が変わると、詳細ページもおかしくなります
    ->使用商品の永久番号(指定されたid)
    実際の開発では,id:0の商品データをajaxとしてサーバに要求するだけである.
    import React from 'react';
import { useHistory, useParams } from 'react-router-dom';

function Detail(props){

  let { id } = useParams();
  let 찾은상품 = props.shoes.find(function(상품){
    return 상품.id == id
  });
//콜백함수를 이용해서 id 값이 같은 것만 뽑아냄

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

export default Detail
    JAva接続データベースツールクラスバックアップ
    Hackerrank | Mini-Max Sum