四、React创建组件、 JSX语法 绑定数据

接:https://www.cnblogs.com/chenxi188/p/11702799.html

用上节建好的my-app项目:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

一、绑定状态数据state

1.在src目录下新建一个componets,用来放【自己建立的组件】、【引入react写法1】:

在components文件夹下,新建一个组件:【home.js】输入如下内容:注:(2)建立state数据(3)绑定state数据

import React,{Component} from ‘react‘;  //(0)【引入组件第一种写法】

class Homes extends Component{         //(0-1)对应第一种引入react引入方法类写法
    //(1)接下来两行为固定写法
    constructor(){
        super();

                //(2)以下几行为建立一个组件状态数据
        this.state={
         name:"Alice",
         age:20,
         sex:"女",
         userinfo:{username:‘sky‘}
        }
    }

    render(){

                //(3)下面的this.state.xxx为把状态数据绑定到前端
        return(
            <div>
                <h2>这里是Home.js组件</h2>
                <p>我的名字是:{this.state.name}</p>
                <p>我的年龄是:{this.state.age}</p>
                <p>我的性别是:{this.state.sex}</p>
                <p>我的用户名:{this.state.userinfo.username}</p>
            </div>
               );
    }
};

export default Homes;

创建组件注意事项:

0.  组件名Home首字母必须大写,否则不报错,但内容也不会显示出来

  1. (1)处为固定写法,最好写成:

    constructor(props){ //用父子组件传值props
    super(props);
    }

  2. (2)处this.state={},注意后面是“=”号不是其它
  3. (3)处,return内部 html标签最外层只能有一个div,不能有多个,否则报错
  4. (3)处,的html标签必须有封闭符号 /,如<br>错误,必须写成<br />

2.然后把【APP.js根组件】改成如下【引入react写法二】(A)(B):

import React from ‘react‘; //(A)引入react写法二
import logo from ‘./logo.svg‘;
import ‘./App.css‘;

//从components文件夹下引入写好的Home.js组件,.js可省略
import Homes from ‘./components/Home‘;

class App extends React.Component { //(B)对应引入写法二类写法
//以下的<Homes />为把home时写好的组件引用过来
  render (){
    return(
    <div className="App">
     <h1>这里是app.js根组件</h1>

     <Homes />
    </div>
    );}
}

export default App;

3.运行:回到my-app项目里在cmd运行代码,启动项目查看效果

npm start

运行效果:

3.再做个新闻组件练练手

1.在components目录下新建News.js

import React,{Component} from ‘react‘;

class News extends Component{
    constructor(){
        super();
    }

    render(){
        return(
            <div>
                <ul>
                    <li>新闻列表。。。</li>
                    <li>新闻列表。。。</li>
                    <li>新闻列表。。。</li>
                </ul>
            </div>
            );
    }
}
export default News;

2.回到App.js里加载News组件:

import React, { Component } from ‘react‘;
import logo from ‘./logo.svg‘;
//import ‘./App.css‘;   //把css样式注释掉,解除所有文本居中问题

//从components文件夹下引入Home.js
import Homes from ‘./components/Home‘;
import News from ‘./components/News‘; //引入News组件

class App extends Component {

  render (){
//用<News/>把组件显到前端
    return(
    <div className="App">
     <h1>这里是app.js根组件</h1>

     <Homes />
     <News />
    </div>
    );}
}

export default App;

刷新:http://localhost:3000/

显示如下:

这里是app.js根组件

这里是Home.js组件

我的名字是:Alice

我的年龄是:20

我的性别是:女

我的用户名:sky

  • 新闻列表。。。
  • 新闻列表。。。
  • 新闻列表。。。

二、绑定属性

1.首先把Home.js里内容改成:

import React,{Component} from ‘react‘;

import ‘../index.css‘; //【1】引入css--在index.css里写一个样式

class Homes extends Component{
    //下3行固定写法
    constructor(props){
        super(props);
        this.state={

        //【2】red名源自index.css里的.red样式定义
         red:‘red‘,
         hello:‘hello‘
        }
    }
    render(){
        //【3】className=class因为css的class和js的class冲突,所以css里class=className、另外还有一个for=htmlFor
        //h2之后的{this.state.xxx}为绑定属性,此处是绑定一个样式
        //p里绑定的title,鼠标移上去将显示hello
        return(
            <div>
                <h2 className={this.state.red}>这里是Home.js组件</h2>
                <p title={this.state.hello}>hello!</p>

{
                   //此处htmlFor作用:点姓名会选中后面的输入框
                    }
                 <label htmlFor=‘name‘>姓名:</label><input id=‘name‘ />

{
           //行内样式写法
           }
            <p style={{"color":"green"}}>此处行内样式写的</p>

            </div>
    );
    }
};

export default Homes;

2.到App.js里引入Home组件即可刷新显示(第二行已经变红):

这里是app.js根组件

这里是Home.js组件

hello!

  • 新闻列表。。。
  • 新闻列表。。。
  • 新闻列表。。。

原文地址:https://www.cnblogs.com/chenxi188/p/11782349.html

时间: 2024-10-13 09:01:40

四、React创建组件、 JSX语法 绑定数据的相关文章

react创建组件的三种方式

react创建组件的三种方式: 1.函数式无状态组件 2.es5方式React.createClass组件 3.es6方式extends React.Component 三种创建方式的异同   1.函数式无状态组件 (1)语法 1 function myComponent(props) { 2 return 3 <div>Hello {props.name}</div> 4 } (2)特点 ● 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到state状态

React创建组件的三种方式及区别

React创建组件具体的三种方式: 1.函数式定义的无状态组件 2.es5原生方式React.createClass定义的组件 3.es6形式的extends React.Component定义的组件 虽然有三种方式可以定义React组件,但是它们有什么不同呢?什么情况下应该使用哪种定义方式呢?请继续往下看 接下来我们先说一下三种方式有什么区别? 1.无状态函数式组件 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作. 无状态函数式组件形式上表现为

react创建组件的几种方式及其区别

react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组件 1.无状态函数式组件 创建无状态函数式组件形式是从React 0.14版本开始出现的.它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.具体的无状态函数式组件,其官方指出: 在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构

【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件) 组件性能优化 减轻state 减轻state:只存储跟组件渲染相关的数据(比如:count/ 列表数据 /loading等) 注意:不用做渲染的数据不要放在state中 对于这种需要在多个方法中用到的数据,应该放到this中 避免不必要的重新渲染 组件更新

Node.js 之react.js组件-JSX简介

JSX 简介 const element = <h1>Hello, world!</h1>; 以上为一个JSX,我的理解(简单理解带有HTML标签的变量元素). 简介:是一个 JavaScript 的语法扩展.我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能. JSX 可以生成 React “元素”. 为什么使用 JSX? React 认为渲染逻辑本

React创建组件的不同方式(ES5 &amp; ES6)

一. 首先缕清楚React.createElement.React.createClass.React.Component之间的关系 1. React.createElement(HTML element) & React.createClass(javascript DOM) >> 使用Javascript DOM创建HTML元素 // 创建lu元素 var ul = document.createElement('ul') // 创建class属性 var listClass =

React教程:JSX语法基础

1.基本概念: React 使用 JSX 来替代常规的JavaScript. JSX 是按照 XML 语法规范 的 JavaScript 语法扩展. JSX 语法的本质:并不是直接把 JSX 渲染到页面上,而是内部先转换成了 createElement 形式,再渲染的. 2. JSX 的优点: JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化: 它是类型安全的,在编译过程中就能发现错误: 使用 JSX 编写模板更加简单快速. 3.JSX语法基础: JSX 注释:推荐使用

React创建组件的3种写法

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下. (1)无状态函数式组件 创建无状态函数式组件形式是从React 0.14版本开始出现的.它是为了创建纯展示组件,这

react入门-----(jsx语法,在react中获取真实的dom节点)

1.jsx语法 1 var names = ['Alice', 'Emily', 'Kate']; 2 <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写 --> 3 ReactDOM.render( 4 <div> 5 { 6 names.map(function (name) { 7 return <div>Hello, {name}!</div> 8