首页 > 代码库 > React笔记01-JSX

React笔记01-JSX

2024-08-17 12:20:01   219人阅读

0.对于学习React，我们先来熟悉下JSX的语法，

下面的这些语法仅用于构建一个组件的标签模块，定义完成之后如果需要做演示，请附加以下代码：

ReactDOM.render(    element1,    document.body);

即可完成标签的演示。

1.普通的标签

const element1 = <div>Hello JSX</div>;

2.带子标签的标签

const element2 = (    <div>        <h1>Hello Child1</h1>        <span>Hello 2</span>    </div>);

3.1带变量的标签

const user = {    name: ‘qiumohanyu‘,    age: 27,    hobby: ‘nothing‘,    website: ‘www.baidu.com‘};const hasNav = true;const element3_1 = (    <div>        <h1>{user.name}</h1>        <span>{user.age}</span>        <span>{user.hobby}</span>        <a src=http://www.mamicode.com/{user.website}>主页>

3.2 内置函数的标签

function getItem() {    return ‘from function‘;}const element3_2 = <div>{getItem()}</div>;

4.1 带类名的标签 class=>className

const type = true;const element4_1 = (    <div>        <div className="mycls">带class的标签</div>        <span className={type?‘class1‘:‘class2‘}>带判断逻辑的类名</span>    </div>);

4.2 带tabindex的标签 tabindex=>tabIndex

const element4_2 = <div tabIndex="0">带tabindex的标签</div>;

4.3 带for属性的label

const element4_3 = <label htmlFor="input1">User Name</label>;

5.1 属性

const MyComponent = React.createClass(    {        render: function() {            return <div>My Component</div>        }    });var x = "foo-value";var y = "bar-value";const element5_1 = <MyComponent foo={x} bar={y}/>;

5.2 属性延伸

var props = {};props.foo = x;props.bar = y;const element5_2 = <MyComponent {...props} />;//需要覆盖时const element5_3 = <MyComponent {...props} foo={‘new-value‘}/>;

6 style属性

var mystyles = {    color: ‘red‘,    border: ‘1px solid #000‘};const element6 = <div style={mystyles}></div>;

7 HTML转义

var innerHtml = ‘<span> my span label</span>‘;var toDiv = { __html: innerHtml };const element7 = (    <div dangerouslySetInnerHTML={toDiv}></div>);

8 自定义HTML属性

const element8=(    <div data-id="can render" ride="can not be render"></div>);

 

React笔记01-JSX


联系
我们