React 创建组件、绑定数据、绑定属性、引入图片、循环数组

最新推荐文章于 2021-10-25 16:31:58 发布

Magic_小小阿昕

最新推荐文章于 2021-10-25 16:31:58 发布

阅读量276

点赞数

分类专栏： React 文章标签： React 创建组件、绑定数据、绑定属性、

本文链接：https://blog.youkuaiyun.com/Amo__/article/details/101443844

版权

React 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何在React中创建组件，包括数据绑定、属性设置、图片引入及数组循环显示等核心操作，帮助初学者快速掌握React开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建组件

首先在src目录下面创建components文件夹
在文件夹中编写你所需要的组件名称。（Home.js）

在app.js中挂载该组件,Home组件中的数据即可渲染在页面。

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;