);}function鏂囩珷(className,title,content,subtitle=true){returnReact.createElement("div",{className:className},React.createElement("h1",null,title),subtitle&&React.createElement("br",null),React.createElement("p",null,content));}鍦ㄨ繖涓緥瀛愪腑锛宎rticle()鍑芥暟杩斿洖涓€涓狫SX鍏冪礌锛屽畠鏈夊洓涓弬鏁般€侭abel浼氬皢绀轰緥浠ｇ爜缈昏瘧鎴愪互涓嬪唴瀹广€傝繖娈典唬鐮佹槗浜庨槄璇诲拰鐞嗚В锛氳浆璇戞椂锛屽ぇ鎷彿娑堝け锛岀敓鎴愮殑浠ｇ爜灏嗕粠article()鍑芥暟浼犲叆鐨勫弬鏁颁紶閫掔粰React.createElement()銆傝娉ㄦ剰鎴戜滑鍦ㄨ繖閲屼娇鐢ㄤ簡鎹㈣绗﹀弬鏁板拰&&杩愮畻绗︺€傚湪瀹為檯璋冪敤涓紝濡傛灉鍙紶閫掍笁涓弬鏁扮粰article()锛岄粯璁や负true锛岃€屽灞俢reateElement()璋冪敤鐨勭鍥涗釜鍙傛暟灏辨槸鍏冪礌銆備絾鏄紝濡傛灉鎴戜滑灏唂alse浣滀负绗洓涓弬鏁颁紶閫掔粰article()锛屽垯澶栭儴createElement()璋冪敤鐨勭鍥涗釜鍙傛暟鐨勫€间负false锛屽苟涓斾笉浼氬垱寤鸿鍏冪礌銆備娇鐢?&杩愮畻绗︽槸JSX涓殑甯哥敤涔犳儻鐢ㄦ硶锛屽彲浠ユ牴鎹叾浠栬〃杈惧紡鐨勫€兼湁鏉′欢鍦板寘鍚垨鎺掗櫎瀛愬厓绱犮€傝繖涓範鎯敤璇笌React閰嶅悎寰楀緢濂斤紝鍥犱负React浼氬拷鐣alse鎴杗ullchildren鑰屼笉浼氫负瀹冧滑鐢熸垚浠讳綍杈撳嚭銆傚湪JSX琛ㄨ揪寮忎腑浣跨敤JavaScript琛ㄨ揪寮忔椂锛屽苟涓嶅眬闄愪簬鍓嶉潰渚嬪瓙涓殑string銆丅oolean绛夊熀鏈被鍨嬪€硷紝杩樺彲浠ユ槸瀵硅薄绫诲瀷鐨凧avaScript鍊笺€備簨瀹炰笂锛屼娇鐢ㄥ璞°€佹暟缁勫拰鍑芥暟鍊煎湪React涓緢甯歌銆備緥濡傦紝鍦ㄤ笅闈㈢殑鍑芥暟涓紝JavaScript鍜孋SS鐨勮〃杈炬柟寮忓涓嬶細((item,index)=>{callback(index)}key={index}>{item}})});}鍦ㄨ繖閲岋紝鍑芥暟浣跨敤瀵硅薄瀛楅潰閲忎綔涓?ul>鍏冪礌涓奀SS鏍峰紡锛坰tyle锛夊睘鎬х殑鍊笺€傝娉ㄦ剰锛岃繖閲屼娇鐢ㄤ簡鍙屾嫭鍙枫€?ul>鍏冪礌鏈変竴涓瓙鍏冪礌锛屼絾璇ュ瓙鍏冪礌鐨勫€兼槸涓€涓暟缁勩€傝緭鍑烘暟缁勬槸閫氳繃鍦ㄨ緭鍏ユ暟缁勪笂浣跨敤map()鏄犲皠鏂规硶鏉ュ垱寤?li>瀛愬厓绱犵殑銆傚湪杩欓噷锛屾瘡涓祵濂楃殑

瀛愬厓绱犻兘鏈変竴涓猳nClick浜嬩欢澶勭悊绋嬪簭灞炴€э紝鍏跺€兼槸涓€涓澶村嚱鏁般€傚鏋滄垜浠皢涓婇潰鐨凧SX浠ｇ爜缂栬瘧鎴愭爣鍑嗙殑JavaScript浠ｇ爜锛屽畠灏嗘槸浠ヤ笅褰㈠紡锛歠unctionlist(items,callback){returnReact.createElement("ul",{style:{padding:5,border:"dottedgreen3px"}},items.map((item,index)=>React.createElement("li",{onClick:()=>callback(index),key:index},item)));}React鍏冪礌绫诲瀷鍙﹀锛孞SX杩樻湁涓€涓瘮杈冮噸瑕佺殑鐗规€э紝灏辨槸瀹氫箟浜哛eact鍏冪礌鐨勭被鍨嬨€傛墍鏈塉SX鍏冪礌閮戒互鏍囪瘑绗﹀紑澶达紝绱ц窡鍦ㄥ乏灏栨嫭鍙蜂箣鍚庛€傚鏋滄爣璇嗙鐨勭涓€涓瓧姣嶆槸灏忓啓锛屽垯鏍囪瘑绗︿綔涓哄瓧绗︿覆浼犻€掔粰createElement()銆備絾鏄紝濡傛灉鏍囪瘑绗︾殑棣栧瓧姣嶅ぇ鍐欙紝瀹冨皢琚涓哄疄闄呮爣璇嗙锛屽苟涓旇鏍囪瘑绗︾殑JavaScript鍊煎皢浣滀负绗竴涓弬鏁颁紶閫掔粰createElement()銆傝繖鎰忓懗鐫€JSX琛ㄨ揪寮?CustomButton/>琚紪璇戜负JavaScript浠ｇ爜锛屽皢鍏ㄥ眬CustomButton瀵硅薄浼犻€掔粰React.createElement()銆傚浜嶳eact锛岃繖绉嶅皢闈炲瓧绗︿覆鍊间綔涓虹涓€涓弬鏁颁紶閫掔粰createElement()鐨勮兘鍔涘彲鐢ㄤ簬鍒涘缓缁勪欢銆傚湪React涓畾涔夋柊缁勪欢鐨勬渶绠€鍗曟柟娉曟槸缂栧啓涓€涓嚱鏁帮紝璇ュ嚱鏁板皢props瀵硅薄浣滀负鍙傛暟骞惰繑鍥濲SX琛ㄨ揪寮忋€俻rops瀵硅薄鍙槸涓€涓〃绀哄睘鎬у€肩殑JavaScript瀵硅薄锛屽氨鍍忎綔涓虹浜屼釜鍙傛暟浼犻€掔粰createElement()鐨勫璞′竴鏍枫€備緥濡傦紝杩欐槸鍙︿竴绉嶇紪鍐檃rticle()鍑芥暟鐨勬柟娉曪細functionArticle(props){return(

{props.title}

{props.linebreak&&
}

{props.content}

);}function鏂囩珷(className,title,content,linebreak=true){return(

{title}

{linebreak&&
}

{content}