週末研究:REACT基礎:関数素子とprops

REACTDOM.render(構成部品の位置、document.getElementById(「root」)
こちらはindexjsです.
index.jsの最後のコードRECTDOM.render()には、素子を動的にあちこち移動させるための一般的な最初のパラメータが含まれています.
rootという名前のインデックスを2番目のパラメータとして設定し、使用します.htmlに接続して複数のコンポーネントを1つのhtmlに分散する(レンダリング)
しかし、関数要素を理解するために、要素blogを作成して直接レンダリングし、indexとして使用します.jsページに直接入力します.
(index.jsにコードを直接入力するよりも、複数のコンポーネントファイルをフォルダとして管理し、相互間の接続を実現するのが従来の方法です.)
関数にパラメータを追加するようにpostsというprops(私がつけたprops名)とpropsの値postの配列を渡します.postという名前の配列でidという名前のキーを与え、地図を回した結果にラベルを貼るのと同じ効果があります.(フナ餅型には名前のないフナがいくつか入っているのではなく、小豆の甘い小豆フナ、クリームの入ったシュークリームフナ.id:甘い小豆.id:クリームシュークリーム)
postsは現在,関数型素子内で構造分解を行っている.

const {posts} = props;

下記のコードの通りです.

this.props.posts

postsというpropsは関数コンポーネントblogに渡され、return()に入る部分は画面でレンダリングするjsxコードを含む部分である.
変数宣言はreturn()の上で行われます.const sidebarという変数とconstコンテンツという2つの変数を宣言し、return()内で変数のJavaScriptコードをjsxコードとして{}の括弧に書き込めばよい.

const sidebar = (

<ul>
  {posts.map((post)=>{
	<li key={post.id}> {post.title} </li>
})}</ul>

);

sidbarという変数では、ulはpostsでpostの個数で表示されます.現在のパブリケーション配列には3つのオブジェクトがあります.
3つのオブジェクトを含むフラットな投稿がpostsというドロップダウンリストに渡され(post=>posts)、postsをmapに変換すると結果は3つあります
つまり、<li> </li>は<ul>に囲まれている.liの内容では、{post.title}換言すれば、post=post配列のオブジェクトのキー値にtitleという名前のキー値にアクセスすることで、hello、bonjour、nihaoが画面に順次表示されます.また、liタグにkey={post.id}を作成して、mapが吐いた結果をコンピュータが認識し、区別できるようにすることも忘れません.
上図にコードの結果を示します.コンソールウィンドウも開き、propsが関数コンポーネントにどのように渡されたかが表示されます.
contentという変数もsidbarと同じ原理で、mapを変換することでcontentというkey値を3つレンダリングします.