2019-05-23に投稿

5/23進捗

おすすめサービスコンポーネントを作りました

image

実装

あまり難しいことはしてないのでまるっと公開してしまいますが。

  • array: おすすめサービスのインデックスをもつ配列
  • dispArray: 乱数生成した結果を格納する配列
  • num: 0からarray.lengthまでの数字から乱数を生成した結果

おすすめサービスの候補が仮に20個あったとして、
1. arrayにその20件の情報を格納します。
2. 0-19までの乱数を発生させ、該当するインデックスをdispArrayに格納し、arrayから削除します。
3. 残ったarrayに対して再度乱数を発生させます。

あとはReactのJSXを組み立てるだけですね。


export class RecommendServices extends React.Component { render() { if (store.getState().recommend === undefined) { let array = []; let dispArray = []; for (let i = 0; i < recommendConfig.length; i++) { array.push(i); } for (let j = 0; j < 3; j++) { let num = Math.floor(Math.random() * array.length); if(array[num] !== undefined){ dispArray.push(array[num]); } array.splice(num, 1); } console.log("dispArray", dispArray); store.dispatch(setRecommend(dispArray)); console.log(store.getState()); } let dispElm = []; for (let i = 0; i < store.getState().recommend.length; i++) { dispElm.push( <div className="card"> <div className="card-title"> <a href={recommendConfig[store.getState().recommend[i]].href}> <img src={recommendConfig[store.getState().recommend[i]].img} width={200}/> <br/> <div> {recommendConfig[store.getState().recommend[i]].title} &nbsp;<i className="fas fa-external-link-alt 2x" style={{ fontSize: 14 }}/> </div> </a> </div> <div style={{ fontSize: 12 }}> {recommendConfig[store.getState().recommend[i]].comment} </div> </div> ); } console.log(dispElm) return ( <div>{dispElm}</div> ); } }

recommendConfig

export const recommendConfig = [
  {
    title:'Crieit',
    href:'https://crieit.net/boards/baseball-score-management',
    img:'https://storage.googleapis.com/deviita/upload_images/a920719ad1329bd0abcef3505eda1be85c198e94430c7.png',
    comment:'本システムの開発の進捗を掲載させていただいています。'
  },
  {....}
]

ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

所有者限定モードのためこのボードには投稿できません
コメント