2021-11-01から1ヶ月間の記事一覧

React イベントハンドラー

イベントハンドラーのイベント名はキャメルケースで記述 function App() { return ( <div onClick={()=>{alert("clicked")}}> TEST </div> ); }

mapによる特定のキーバリューの取得

var foodList = { 'オムライス': 450, '焼きそば': 500, 'お好み焼き': 600, '焼き飯': 400 }; //任意のキーワードを指定する var order = ['焼き飯', 'お好み焼き']; var result = order.map( function( value, index, array ) { //配列のキーワードを使っ…

React propsをスプレッド演算子で渡す

const bluelogProps = {title: "TITLE", message:"MESSAGE"} function App() { return ( <div> {/* 個別に入れ込んで渡す*/} <Bluelog title={"asfasdfasdfasdf"} message={"ssdfaf"} /> {/* スプレッド演算子でまとめて渡す*/} <Bluelog {...bluelogProps} /> <FuncSample/> </div> ); } function Bluelog(props) { return( <div> <h1>{props.title}…</h1></div>

React props.childrenによるコンポジション(継承)

{/* 子コンポジション*/} function ColoredText(props){ return ( {props.children} {/ 渡ってきたJSXにアクセスしてレンダリング /} ); } {/*親コンポジション*/} function Bluelog(props) { return( {/子コンポジションにXMLを渡す/} {props.title} {props…

aws cli S3ファイルのキャッシュ設定

AWS

Cloud Frontでキャッシュ更新がされない問題が発生 └S3のファイルのメタデータでCache-Controlを設定することで解決した aws s3 cp s3://dejima/test3/ s3://dejima/test3/ --recursive --exclude '' --include '' --cache-control "max-age=2" --profile ho…