React での es6 の適用例の詳細

小云云
リリース: 2017-12-23 10:56:06
オリジナル
1516 人が閲覧しました

この記事は主に React での es6 のアプリケーション コード分析を紹介するもので、非常に優れており、困っている友人が参考にしていただければ幸いです。

React であろうと React ネイティブであろうと、Facebook は ES6 構文を使用することを公式に推奨しています。これまでプロジェクトで使用したことがない場合、ES6 を体系的に学習する時間がなかった場合、突然切り替えるといくつかの問題が発生します。当面はこの記述方法だけで十分です。非常にシンプルな ES6 の構文を体験していただけます。 React での es6 のアプリケーションを紹介します。 具体的な内容は次のとおりです。

import React,{Component} from 'react';
class RepeatArrayextends Component{
 constructor() {  super();
 }
 render(){
  const names = ['Alice', 'Emily', 'Kate'];
  return (
   <p>
   {
    names.map((name) =>{return <p>Hello, {name}!</p>;} )
   }
   </p>
);
}
}
export default RepeatArray;
ログイン後にコピー

2. ol と li の実装

import React,{Component} from 'react';
class RepeatLiextends Component{
 render(){
  return (
   <ol>
   {
    this.props.children.map((child)=>{return <li>{child}</li>})
   }
   </ol>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<p>
<RepeatLi>
<span>hello</span>
    <span>world</span>
</RepeatLi>
   </p>
);
}
}
export default RepeatArray;
ログイン後にコピー

3. サーバーからのデータの取得

import React,{Component} from 'react';
class UserGistextends Component{
 constructor(){
  super();
  this.state={
   username:'',
   lastGistUrl:''
  }
 }
 componentWillMount(){
  $.get(this.props.source, function(result){
   var lastGist = result[0];
   //if (this.isMounted()) {
    this.setState({
     username: lastGist.owner.login,
     lastGistUrl: lastGist.html_url
    });
   //}
  }.bind(this));
 }
 render(){
  return(
   <p>
    {this.state.username} ..
    <a href={this.state.lastGistUrl} >here</a>
</p>
  );
 }
}
class RepeatArrayextends Component{
 constructor() {
  super();
 }
 render(){
  return (
   <p>
   <UserGist source="https://api.github.com/users/octocat/gists" />
   </p>
);
}
}
export default RepeatArray;
ログイン後にコピー

4. STATE の初期化

class Videoextends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops,
    };
  }
}
ログイン後にコピー

5分解 スプレッド演算子

を使用すると、属性のバッチをサブコンポーネントに渡すことがより便利になります。次の例では、className を除くすべての属性を p タグに渡します

class AutoloadingPostsGridextends React.Component{
  render() {
    var {
      className,
      ...others, // contains all properties of this.props except for className
    } = this.props;
    return (
      <p className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
</p>
    );
  }
}
ログイン後にコピー

React 開発を使用するときに最も一般的な問題は、親コンポーネントが子コンポーネントに多くの属性を渡したい場合に面倒なことです

class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
 render(){
  return (
   <SubComponent name={this.props.name} age={this.props.age}/>
   )
 }
}
ログイン後にコピー

Spread 演算子を使用すると、とても簡単です

class MyComponentextends React.Component{
//假设MyComponent已经有了name和age属性
 render(){
  return (
   <SubComponent {...this.props}/>
   )
 }
}
ログイン後にコピー

上記の方法は、親コンポーネントのすべてのプロパティを渡すことです。一部のプロパティを渡す必要がない場合はどうすればよいでしょうか。これも非常に簡単です

class MyComponentextends React.Component{
//假设MyComponent有很多属性,而name属性不需要传递给子组件
 var {name,...MyProps}=this.props;
 render(){
  return (
   <SubComponent {...Myprops}/>
   )
 }
}
ログイン後にコピー

上記のメソッドで最も一般的に使用されるシナリオは、親コンポーネントのクラス属性を特定の要素のクラスとして個別に抽出する必要があり、他の属性を子コンポーネントに渡す必要があるというものです

6. コンポーネントを作成します

import React,{Component} from "react";
class MyComponentextends Component{
//组件内部代码
}
ログイン後にコピー

7. State /Props/PropTypes

es6 では、props と propTypes をクラス外で静的プロパティとして初期化できます

class MyComponentextends React.Component{}
MyComponent.defaultProps={
 name:"SunnyChuan",
 age:22
};
MyComponent.propTypes={
 name:React.PropTypes.string.isRequired,
 age:React.PropTypes.number.isRequired
};
ログイン後にコピー

es7 は、クラス内で直接変数式を使用することをサポートしています

class MyComponentextends React.Component{
 static defaultProps={
  name:"SunnyChuan",
  age:22
 }
 static propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
 }
}
ログイン後にコピー

state は異なります最初の 2 つは静的ではありません

class MyComponentextends React.Component{
 static defaultProps={
  name:"SunnyChuan",
  age:22
 }
 state={
   isMarried:false
 }
 static propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
 }
}
ログイン後にコピー

7. 一般的なコンテナを構築する場合、拡張プロパティは非常に役立ちます

function App1(){
 return <GreetingfirstName="Ben"lastName="Hector"/>;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
 return <Greeting {...props} />;
}
ログイン後にコピー

8. 代わりに es6 計算プロパティを使用してください

this.setState({
  [name]:value
})
//代替
var partialState = {};
partialState[name] = value;
this.setState(partialState);
ログイン後にコピー

関連する推奨事項:

React コンポーネントで Echart を使用する正しい姿勢

例 React が親コンポーネントを介して子コンポーネントにクラス名を渡す方法の詳細な説明

React でコンポーネントを記述する方法とは何ですか

以上がReact での es6 の適用例の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート