アレイを介して、結合特性、画像の導入、結合ループコンポーネント、データを生成する反応

コンポーネントの作成

1. まず、下のsrcディレクトリ内のフォルダ構成を作成します
2. フォルダに必要なコンポーネントの名前を書きます。（Home.js）
3. App.jsは、ページをレンダリングするために、データのホームコンポーネントのコンポーネントをマウントします。

   import React from 'react';
   import './assets/css/App.css'
   import HomePage from './components/Home.js'
   function App() {
     return (
       <div className="App">
         <HomePage/>
       </div>
     );
   }
   
   export default App;
   
   

データバインディング

	import React, { Component } from 'react'
	
	class HomePage extends Component {
	
	 constructor(){
	     super()
	     this.state = {
	        username: '安沫昕'
	     }
	 }
	
	  render() {
	    return (
	      <div>
	          <h1>{this.state.username}</h1>
	      </div>
	    )
	  }
	}
	
	
	export default HomePage;

結合特性

結合特性は、注意してください：

 1.  class 要变成 className   

 2.  for 要变成  htmlFor

 3.  style属性和以前的写法有些不一样

import React, { Component } from 'react'

class HomePage extends Component {

 constructor(){
     super()
     this.state = {
        title:'这是一个',
        color: 'red',
        style:{
            color: 'red',
            fontSize: '40px'
        }
     }
 }

  render() {
    return (
      <div>

          <div title={this.state.title}>这是一个属性</div>

          <div className={this.state.color}>这是一个style属性</div>

          <label htmlFor="name">姓名</label>
          <input text="type" />

          <div style={{'color':'red'}}>绑定style</div>
          <div style={this.state.style}>绑定style</div>
      </div>
    )
  }
}


export default HomePage;

写真の紹介

• 地元の絵の導入の導入-----モジュールの方法

import React, { Component } from 'react'
import Logo from '../assets/images/logo.svg'

export class image extends Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
            <div>
                // 引入本地图片
                <img src={Logo}  title="logo" className="images" />
                <img src={require('../assets/images/logo.svg')}  title="logo" className="images" />
                // 引入远程图片
				<img src="https://www.baidu.com/img/xinshouyedong_4f93b2577f07c164ae8efa0412dd6808.gif"  title="logo" className="images" />

            </div>
        )
    }
}

export default image;

ループ配列

import React, { Component } from 'react'
class ForComponent extends Component {
  constructor(props){
      super(props)
      this.state={
        list: ['111','222','333'],
        list2: [<h2 key='111'>我是一个h2</h2>,<h2 key='222'>我是一个h2</h2>],
        list3:[
          {title: 'news1111'},
          {title: 'news2222'},
          {title: 'news3333'},
        ]
      }
  }

  render() {
    let listResult = this.state.list.map(function(val, key){
      return <li key={key}>{val}</li>
    })
    return (
      <div>
          // 循环标签
          {this.state.list2}
          <hr/>
          // 循环
          {listResult}
          <hr/>
          // 循环对象
          <ul>
            {
              this.state.list3.map(function(val,key){
                return <li key={key}>{val.title}</li>
              })
            }
          </ul>
      </div>
    )
  }
}


export default ForComponent;