TIL(Web)-2021.01.21(React-3)

4131 ワード
TIL(Web) テキストリンク
今日はReact 3時間目です

Today I Learned

  • Reactを使用してリストページ
    • を作成する.

    reactを使用したリストページの作成

  • 以前JSPによって作成されたビューからreactコンポーネントに移行する場合、jstlタグとelタグはすべてクリアする必要があります.
  • jstl、elはjasperによってバックグラウンドで識別され処理され、コンポーネントを削除してフロントで動作するとjsxはjstl、el
    • を処理できない.
  • サーバはドキュメントを処理しません.js、cssファイル
    • のみ提供
  • サーバは、データを提供するAPI
    • のみを提供する
  • 注意事項
  • class > className
  • onclick="string">onClick={()=>{実行する論理}
  • input>の値を入力する場合は、onChangeまたはread-onlyを使用する必要があります.
    • サーバデータを
  • Ajaxにインポート(リスト)
  • ステータスの設定
  • の運転順序をよく考慮する必要があります
  • constructor > render > DidMount 
    • 	constructor(props){
		super(props);
		this.state={
			list:[
				{"id":92032472,"title":"eff","writerId":"newlec","content":"af"}
			],
			count:0,
			page:1
		};
	}
	
	componentDidMount(){
		fetch(`/api/notice/list?p=${this.state.page}`)
		.then((response)=>{
			return response.json();
		})
		.then((list)=>{
			this.setState({list});
		});
	}
  • map()を使用してステータス値を描画
    {}ブロックを使用して
  • jsxコードの
    • にスクリプトコードを入れます.
  • map
  • の値を指定値に変更して、新しいオブジェクトを作成し、
    • に戻ります.
    {
this.state.list.map(notice=><tr key={notice.id}>
				<td>{notice.id}</td>
				<td className="title indent text-align-left"><a href={notice.id}>{notice.title}</a>[{notice.cmtCount}]</td>
				<td>{notice.writerId}</td>
				<td>{notice.regdate}</td>
				<td>{notice.hit}</td>
			</tr>)
}
    欠落した値[]を削除
    Win 32 SDKウィンドウを作成するプログラムをバックアップします.プログラムをテストするときによく使います.便利です.