reactコンポーネントのrender方法

12797 ワード

react

コンポーネントクラスの一つは、レンダー方法を実現する必要があります.
このレンダー法はJSX元素を返さなければなりません.一つの外層のJSX元素ですべての内容を包んで、複数のJSX元素を並列に戻すことは合法ではない.

間違った書き方

render () {
return (
<div>   </div>
<div>   </div>
	)
}

正しい書き方

render () {
return (
  	<div>
  		<div>   </div>
  		<div>   </div>
  	</div>
   )
}

表式の挿入
JSXではJavaScriptの表式を挿入できます.表式はその結果をページに描画します.
要求:表現は{}で包まれます.

render () {
const word = 'is good'
return (
	<div>
		<h1>React    {word}</h1>
	</div>
	)
}

関数式で返します.

render () {
return (
	<div>
		<h1>React    {(function (){
				 return 'is good'})()}</h1>
	</div>
)
}
// {}       JavaScript  。render                    。
// {}           . eg：
render () {
const className = 'header'
return (
	<div className={className}>
		<h1>React   </h1>
	</div>
)
}

直接クラスを使ってReact.jsの要素にクラス名を追加します.
この方式は合法的ではない.
もう一つの特例はfor属性です.例えばMaleは、forもJavaScriptのキーワードですので、JSXでhtml Forを使って代わります.つまりMale.\
条件を返します

render () {
	const isGoodWord = true
		return (
		<div>
			<h1>
			React   
			{isGoodWord? <strong> is good</strong>: <span> is not good</span>}
			</h1>
		</div>
	)
}

上のコードにはisGoodWord変数がtrueと定義されていますが、下には｛｝という表現があります.isGoodWordの違いによって、JSXの内容が変わります.
nullを返すと、React.jsは何も表示されません.この表式の挿入を無視するのと同じです.

render () {
	const isGoodWord = true
	return (
		<div>
			<h1>
				React   {isGoodWord? <strong> is good</strong>: null}
			</h1>
		</div>
	)
}

JSX元素変数

render () {
const isGoodWord = true
const goodWord = <strong> is good</strong>
const badWord = <span> is not good</span>
return (
	<div>
		<h1>
			React   {isGoodWord ? goodWord : badWord}
		</h1>
	</div>
	)
}

ここでは、2つのJSX要素をgoodWordとbadWordの2つの変数に割り当て、それらを表式として挿入する条件を返します.上記の例と同様に、ランダムに異なるページを返す効果が現れます.

renderGoodWord (goodWord, badWord) {
const isGoodWord = true
return isGoodWord ? goodWord : badWord
}
render () {
	return (
	<div>
		<h1>
		React   {
			this.renderGoodWord(
				<strong> is good</strong>,
				<span> is not good</span>
			)}
		</h1>
	</div>
	)
}

一つのレンダーGoodWord関数を定義し,この関数は二つのJSX要素をパラメータとして受け入れ,その中の一つをランダムに返した.レンダー法では、上記の例の2つのJSX要素をレンダーGoodWordに導入し、関数を返したJSX要素を表式挿入によりページに挿入します.
作者:咸魚小Nリンク:https://www.jianshu.com/p/83607f37ccaf 出所:略書の著作権は作者の所有になります.商業転載は作者に連絡して授権を獲得してください.商業転載ではないので、出典を明記してください.

C言語ビット演算