react--入门

Posted 2021-02-03 vaevae

1.基本写法：

　　(1)

import React from ‘react‘;

class Login extends React.Component{
    render(){
        return(
               <div></div>
        )
    }
}

export default  Login;

　　(2)

import React,{Component} from ‘react‘;

class Login extends Component{
    render(){
        return(
            <div><div>
        )
    }
}

export default  Login;

 2.使用变量：

import React from ‘react‘;

class Login extends React.Component{
    render(){
       let name=‘React‘;
        return(
           <div>Hello,{name}</div>
        )
    }
}

export default  Login;

3.Props:

 this.props.参数名:

import React,{Component} from ‘react‘;

class Parent extends Component{
    render(){
        return(
            <div>
                <ul>
                    <Child name=‘张良‘ age=‘17‘></Child>
                    <Child name=‘韩非‘ age=‘24‘ ></Child>
                    <Child name=‘卫庄‘ age=‘20‘ ></Child>
                </ul>
            </div>
        )
    }
}

class Child extends Component{
    render(){
        return(
            <li>姓名：{this.props.name}--年龄：{this.props.age}</li>
        )
    }
}

export default Parent

this.props.children: