React_html/css_WEB-ITnose の使用を開始する-htmlチュートリアル-php.cn

コンテナにレンダリングする方法

コードに直接移動します:

    //第一个参数是构造的组件，第二个参数是使用组件的容器    ReactDom.render( <Avatar name='' link='' />, document.getElementByID(''));

ログイン後にコピー

ページをレンダリングし、選択した要素にコンポーネントを配置します

コンポーネントの定義方法

React.createClass({render:function (){return (I am a dom element)}}) build

    var ProfilePic = React.createClass({          render: function() {            //可以在return前进行相关处理            return (                  <img src={this.props.link} />             );        }    });

ログイン後にコピー

1. return() 括弧内に入力できるラベルは 1 つだけです。それ以外の場合は、エラーが報告されます

2 は、このプロパティです。 ReactDOM.renderで渡され、コンポーネントセットのオブジェクトです次の例のようにプロパティ値をコンポーネント経由で渡すことができます

コンポーネント内のコンポーネント

    // 渲染到容器    ReactDOM.render(        <Avatar            name="GuoYongfeng"            link="https://avatars2.githubusercontent.com/u/8686869?v=3&s=460"        />,         document.getElementById('example')    );        var Avatar = React.createClass({          render: function() {            return (                  <div>                <ProfilePic link={this.props.link} /> //this.props包含了name和link的属性，同时在ProfilePic组件中可以使用this.props获取link的值                    <ProfileLink name={this.props.name} />                  </div>            );          }    });

ログイン後にコピー

変数の初期値を設定する方法

使用getInitialState:function(){return {}} を使用して初期化された変数を宣言し、this.setState( {キーと値のペア}) を使用します。 getInitialState 関数の変数を変更し、this.state オブジェクトを通じて属性の値を取得します。コードは次のとおりです。

    var ClickApp = React.createClass({    getInitialState:function(){        return {            clickCount: 0,                        }    },    handleClick: function(e){        this.setState({            clickCount: this.state.clickCount + 1,        });    },    render: function(){        return (            <div>                <h2>点击下面按钮</h2>                <button onClick={this.handleClick}>点击我</button>                <p>你一共点击了：{this.state.clickCount}</p>            </div>        )    }    });

ログイン後にコピー

getInitialState は、コンポーネントのライフサイクルで 1 回だけ実行され、コンポーネントの初期状態を設定します。

this.props.children

this.props オブジェクトのプロパティはコンポーネントのプロパティに 1 対 1 で対応しますが、例外が 1 つあります。それは、すべての子を表す this.props.children プロパティです。コンポーネントのノード。

this.props.children の値には 3 つの可能性があります。現在のコンポーネントに子ノードがない場合は、未定義です。子ノードが 1 つある場合、データ型はオブジェクトです。データ型は配列です。 React は、this.props.children を処理するためのユーティリティメソッド React.Children を提供します。 React.Children.map を使用すると、this.props.children のデータ型が未定義であるかオブジェクトであるかを気にせずに子ノードをトラバースできます

PropTypes

コンポーネントによって提供されるパラメーターが要件を満たしているかどうかを確認します。たとえば、propTypes: { title: React.PropTypes.string.isRequired }、render:function(){return} このコードの機能は、タイトルを入力する必要があり、文字列であることを示すことです。 getDefaultProps を使用してデフォルトの文字列を設定します getDefaultProps: function () { return { title : 'Hello World'};},

コンポーネントのライフサイクル

ライフサイクルは 3 つの状態に分かれています:

マウント:リアル DOM が挿入されました
更新中: 再レンダリング中
アンマウント中: リアル DOM が移動されました

React は、各状態に対して 2 つの処理関数を提供します。will 関数は状態に入る前に呼び出され、did 関数はステートに入る前に呼び出されます。状態に入った後に呼び出されます。状態に入った後に呼び出されます。3 つの状態に対して合計 5 つの処理関数があります。
componentWillMount()
componentDidMount()
componentDidUpdate(オブジェクト prevProps、オブジェクト prevState)
componentWillUnmount()
さらに、React は 2 つの特別な状態処理関数も提供します。

ComponentWillReceiveProps(object nextProps): ロードされたコンポーネントが新しいパラメーターを受け取るときに呼び出されます

shouldComponentUpdate(object nextProps, object nextState): コンポーネントが再レンダリングするかどうかを決定するときに呼び出されます
JSX コンバーター

1埋め込み jsx コードの場合、script タグに type="text/babel" を追加して、browser.min.js 5.8.24 ファイルを導入するか、bower install babel --save-dev を使用して babel ファイルをダウンロードする必要があります。、ES6 を ES5 に変換します

2.

[非推奨]

コードをオンラインコードに変換するには、npm install -g act-tools を使用し、jsx --watch src/ build/conversion を使用します

3. babel を直接使用して変換できます。babel --presets 反応 [es2015] src --watch --out-dir build、[es2015] はオプションです。src はソースファイルパス、build はコンパイル済みファイルパスです 4. gulp で gulp-react 変換を使用する

HTML エスケープ

一部のリッチテキストコンテンツについては、ページに表示されます

    var content='<strong>content</strong>';    React.render(        <div>{content}</div>,        document.body    );        //会直接显示 <strong>content</strong> 相当于ejs中<%= %>

ログイン後にコピー

Html はデフォルトで Html 記事をエスケープします、エスケープしない方法

    var content='<strong>content</strong>';        React.render(        <div dangerouslySetInnerHTML={{__html: content}}></div>,        document.body    );

ログイン後にコピー

CDN ファイル

1. 反応

反応には、React.createElement、React.createClass、React.Component、React.PropTypes、React.Children が含まれます。

反応 dom には、ReactDOM.render、.unmountComponentAtNode、.findDOMNode が含まれます。 React.render メソッドは、React コンポーネントだけでなく HTML 構造もレンダリングできます。 JSX では、最初の文字の大文字と小文字を区別して、ローカルコンポーネントクラスであるか HTML タグであるかを区別します。

(1) HTML タグをレンダリングし、最初の文字を大文字にして変数を宣言します

小文字

    var myDivElement = <div className="foo" />;    React.render(myDivElement, document.body);

ログイン後にコピー

(2) React コンポーネントをレンダリングし、最初の文字を大文字にして変数を宣言します

    var MyComponent = React.createClass({/*...*/});    var myElement = <MyComponent someProperty={true} />;    React.render(myElement, document.body);

ログイン後にコピー

Small Tips

1.数据的传递都是需要至于 {}之中，包括赋值

, {}中的变量都是可以通过 ReactDom.render时传入

2.使用 default为前缀，加上 Checked, Value等设置默认值，如 defaultChecked, defaultValue等，在组件中使用已有的属性。

3. this.refs引用对象集合，在Dom元素上添加了 ref属性后，就会将这个Dom元素添加到 this.refs之中，在页面中这个标签的值是唯一的， this.refs.xxxx.value这种方式可以获取变量的值， ref是一种回调的原理，当子组件的该属性值改变，相应的值会回调给父组件

4.在组件实现时， return(

{ }

)中的 {}可以加入大量的javascript处理函数，如下：

    return (      <ul>        {          this.props.list.map(function (child) {            return <li>{child}</li> //注意这种写法，<li>{child}</li>          })        }      </ul>    );

ログイン後にコピー

5.组件可以直接当做Dom标签一样使用，像 button, h1等

6.与Javascript DOM中一样的写法， class对于 className, html对应于 htmlFor；另外，对于非html内置的属性，一定要加上 data-，如

7.JSX 的基本语法规则