リアクション(React)-htmlブロックの作成:構成部品(component)

6384 ワード
component 構成部品 はんのう テキストリンク
帰りの間.
return(
  <div></div>
  <div></div>
)
こんなに平行なの?連続?同じ場所のdivラベルを作成できません.
いくつか作って欲しいなら
return(
  <div>
    <div></div>
    <div></div>
  </div>
)
このように
大きなdivに包まれているような方法を使うべきです.
複数のHTML要素を1つの単語にまとめるレスポンス構文:

構成部品


使用方法


  • functionで目的の関数を作成します.

  • 必要なHTMLを関数return()に入れます.

  • 作成したサムネイルHTMLブロックを必要な場所に入力します.

  • HTMLブロックをコンポーネントと呼びます.
    •  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <Modal></Modal>		// 원하는 위치에 Modal 이라는 컴포넌트 삽입
       				// <Modal /> 으로도 작성 가능
	  </div>
      
function Modal() {
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}
    注意:
  • 名前大文字
  • return()内のラベルで囲まなければなりません
    :内部に意味のない<div></div>を書きたくなければ、<></>を書くことができます
    上部の関数App()もコンポーネントです
    管理が便利なメリット.必要なものを作る.
    制作の基準-どんな部品で作ったほうがいいですか?

  • 繰り返し表示されるHTMLブロック(リストなど)

  • 頻繁に変更されるUI:頻繁に再レンダリングされるため、対応するUIのみが再レンダリングされるため、より効率的です.

  • ページを整理するときは、コンポーネントとして作成することをお勧めします.
    • 欠点:
    stateを書くと複雑になります.以前に作成した変数(記事のタイトルなど)はfunctionApp()で宣言されています.
    したがって、構成部品関数では使用できません.
    ->propsという文法は解決する必要があります.まだ勉強していません.
    単位試験のためのProxyquireまたはSononを使用しないこと
    [react]動的ルーティング(match)