react小記
2238 ワード
react小記 reactのjsx文法はJavaScriptと互換性がありません.JSXを使うところは を加えます.すべてのコンポーネントクラスは、コンポーネントを出力するための独自の だけを含むことができます.は、 であるから.は、コンポーネントラベルに属性を付け、コンポーネント内部で を取得することができる. を巡回することができる.
class YourClass extens Component{
static propTypes={
name:PropTypes.object/nameはあなたが使うクラスの中の一つの属性です.
)
)
は、
get InitalState(){
return{XXX:false}
) を修正する. フォームの内容は を読み取ります.コンポーネントのライフサイクル:
component WillMount()
component DidMount()
componentWillUpdate(object nextProps、object next State)
component DidUpdate(object prevProps、object prevState)
component WillUnmount()
コンポーネントの
style="カラー:{this.state.co lor}"
書きます
style={color=this.state.co lor}
ここで、第1の大かっこはJavaScript文法であり、第2の大かっこはスタイルオブジェクト を表している.ネットワーク要求: を再レンダリングする.
scriptタグにtype="text/babel" render方法が必要です.コンポーネントクラスの最初の文字は大文字でなければなりません.コンポーネントクラスは、トップレベルのラベルclassをclassNameに書き、forはhtmlForに書く.classとforはJavaScriptの保持字this.propsオブジェクトを介してthis.props.childrenは、コンポーネントのすべてのサブノードを属性で表し、React.Children.mapを用いてサブノードpropTypes使用:(1)設置庫:npm install --save prop-types(2)導入:‘import PropTypem from’(3)クラスで使用する:class YourClass extens Component{
static propTypes={
name:PropTypes.object/nameはあなたが使うクラスの中の一つの属性です.
)
)
refは、実際のDOMノードではなく、メモリの中にあるデータ構造を仮想DOMといい、コンポーネントレンダリングにはref属性があり、レプリカイベントにはthis.refs.[refName]で真実のDOMノードに戻すことができるが、この属性はDOMを探してドキュメントに挿入してから使用できる.そうでないと、エラーが発生します.getInitialState方法で初期状態を定義することができる.get InitalState(){
return{XXX:false}
)
this.stateを用いて初期状態を読み、this.setState方法で状態値this.propsは、それらが一旦定義されると、もはや変化しないという特性を表している.this.stateは、ユーザのインタラクションによって変化する特性である.this.propsでは取得できません.input textarea select radioなどの要素の値はthis.props.valueでは読み取れません.onChangeイベントのコールバック関数を定義し、event.target.valueを介してユーザ入力の値will関数は状態に入る前に呼び出し、did関数は状態に入った後に呼び出します.component WillMount()
component DidMount()
componentWillUpdate(object nextProps、object next State)
component DidUpdate(object prevProps、object prevState)
component WillUnmount()
style属性設定方式は書き込めません.style="カラー:{this.state.co lor}"
書きます
style={color=this.state.co lor}
ここで、第1の大かっこはJavaScript文法であり、第2の大かっこはスタイルオブジェクト
componentDidMount方法を用いてapi要求を設定し、要求が成功するまで、this.setState方法を用いてUI