react jsx 例子

import React from 'react';

import ReactDOM from 'react-dom';

import './wyw.css';

//定义一个函数

function Timme(props){

    var arr = [

你好1

,

你好2

]

    const  myStyle = {fontStyle:100,color:'red'}

    const a=parseInt(Math.random()*100);

    return(

        

        Hi,world

        

现在是{props.date.toLocaleTimeString()}

        {/* 由函数tick传过来的参数是new Date.date.toLocaleTime */}

        {/* 在jsx中使用js表达式 */}

        

{1+2}

        {/* 在jsx中不能使用if else语句 ，可使用三元运算 */}

        

{ a ===1||a ===98|| a===0 ? 'true':'false'}

        {/* 输出a的值，便于验证 用{} */}

        

{a}

 

        样式 

        {/*  JSX 允许在模板中插入数组，数组会自动展开所有成员：*/}

        

{arr}

        

    )

};

//定义一个函数 

function tick(){

    ReactDOM.render(

        // 想同时渲染多个jsx时把他们放在一个div里

        

        

        {/* 因为 s是单独一行并不是和timme一起调用的所以声明变量myStyle时要注意放的位置，放外面，如果把s放在timme函数里就不用注意/}

        {/* 样式 */}

        

,

        document.getElementById('root')

    )

}

setInterval(tick,1000)

//定义组件

class Aaa extends React.Component{

    render(){

        return(

            

            

Hi,world

 

            {/* //把要做的事情写在一个块里 (合并) */}

            

        );

    }

}

ReactDOM.render(

    ,

    document.getElementById('root')

);

export default Aaa;