import React from 'react';

import ReactDOM from 'react-dom';

import './wyw.css';

//定义一个函数

function Timme(props){

    var arr = [<h1>你好1</h1>,<h1>你好2</h1>]

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

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

    return(

        <div>

        <h1 className='a1'>Hi,world</h1>

        <p>现在是{props.date.toLocaleTimeString()}</p>

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

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

        <h1>{1+2}</h1>

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

        <h1>{ a ===1||a ===98|| a===0 ? 'true':'false'}</h1>

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

        <h1>{a}</h1> 

        <h1 className='s' style={myStyle}>样式</h1> 

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

        <div>{arr}</div>

        </div>

    )

};

//定义一个函数 

function tick(){

    ReactDOM.render(

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

        <div>

        <Timme date={new Date()} />

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

        {/* <h1 className='s' style={myStyle}>样式</h1> */}

        </div>,

        document.getElementById('root')

    )

}

setInterval(tick,1000)

//定义组件

class Aaa extends React.Component{

    render(){

        return(

            <div>

            <h1>Hi,world</h1> 

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

            </div>

        );

    }

}

ReactDOM.render(

    <Aaa />,

    document.getElementById('root')

);

export default Aaa;