react系列（2）表达式及样式语法

╰半橙微兮° 2021-09-14 10:18 286阅读 0赞

React表达式用两个大括号\{ \}表示。简单来说，就是在元素标签中\{ \}里的js脚本可以被执行，有点类似于jsp的<%= %>。在表达式中不建议有太多逻辑实现，主要目的是为了可以返回一个可被渲染对象、内部方法函数、props或state，如标签元素，这类用法在本章做个简单了解即可。所以当你在React中看到以下写法：

不要觉得奇怪，上例子中最终div里渲染的是some code脚本的最终返回值：字符串文本或标签。

本章主要想讲述表达式的其它语法实现，如计数、三元表达式、数组、样式等。

## 计数语法： ##

ReactDOM.render(
    <div>
        <h1>{1+1}</h1>
    </div>
    , document.getElementById('example'));

渲染结果：

## 三元表达式语法： ##

var i = 1; 
    ReactDOM.render(
    <div>
    	<h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    , document.getElementById('example'));

渲染结果：

## 数组语法： ##

var arr = [
        <h1 key="1">key1</h1>,
        <h1 key="2">key2</h1>,
    ];
    ReactDOM.render(<div>{arr}</div>,document.getElementById('example');

渲染结果：

数组语法还有一种常用的情景：根据一个数组对象渲染列表，这时需要使用map，关于这个语法糖在后面文章中会介绍到，脚本如下：

// 父级组件入参
    var listData: [{
            id: "id1",
    	    data: "data1"
        },
    	{
    		id: "id2",
    		data: "data2"
    	},
    	{
    		id: "id3",
    		data: "data3"
    	}
    ]
    
    // 子级组件渲染
    render: function() {
    	return(
            <div>
                <ul>
                    {
                        this.props.listData.map(function(item,index){
                            return <li key={item.id}> ID:{item.id},值:{item.data} </li>
                        })
                    }
                </ul>
            </div>
        );
    }

## 样式： ##

1. 内联样式：

var myStyle = {
        fontSize: 50, 
        color: '#FF0000'
    }; 
    ReactDOM.render(<h1 style={myStyle}>Hello World</h1>,document.getElementById('example'));

2. 外联样式：

（贴士）在引用样式时，组件class属性需要写成className，这是因为class是JavaScript的保留字。

3. ES6引用样式（import）：

import React from 'react';
    import './css/color.css';
    
    class App extends React.Component {
    	constructor(props) {
    		super(props);
    		this.state = {};
    	}
    
    	render() {
    		return(<div className="red">www.helloui.net</div>);
    	}
    }
    
    export default App;