React学习回顾（第四节）

第四节 React HTML模板

class MyApp extends React.Component{
    render(){
        let name = 'lx';
        let age = 12;
        return (
            <div>
                <h1 class="solt">my name is { name }</h1>
                <h2 data-age={ age }>it's { age } years old!!</h2>
            </div>
        )
    }
}

ReactDOM.render(<MyApp />,document.getElementById('app'));

我们在这里面使用了 { } 语法，可以直接存放变量在其中。

但是我们在h1 标签中放入了一个class = "solt" 报错了

//错误信息  -> 让我们使用className
Warning: Invalid DOM property `class`. Did you mean `className`?
    in h1 (created by MyApp)
    in div (created by MyApp)
    in MyApp

在React 中有很多一部分属性被重新定义了，我们可以直接在文档中找到。

自定义属性和内容都被渲染出来，我们只需要把class 改下就完成了我们想要的东西。