1.1 JSX基础知识

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import registerServiceWorker from './registerServiceWorker';

// ReactDOM.render(<App />, document.getElementById('root'));
let str='浩浩'
//1：在react中想将JS当做变量引入到JSX中，需要使用{}
let el1=<span>{str}</span>

//2：在jsx中，相邻的2个jsx元素，渲染时外面需要包裹着一层元素.否则报错
let el2=<div><span>{str}</span><p></p></div>

//3：{}取值表达式，取的是有返回值的表达式或者函数
//4：如果多个元素想在return后面换行，我们需要（）当做整体返回
function sayName(name) {
    return (
        <div>
            {/*注释写法*/}
            <h1>{name}</h1>
            <h1>{name}</h1>
        </div>
    )
}
let el3=<span>{sayName(str)}</span>

//5：for循环
let lessons=[
    {name:'vue',price:800},
    {name:'react',price:1000},
]
            //做法一：
function toLesson(item) {
    return `当前课程是${item.name},价格是${item.price}`
}
let style={ backgroundColor:'green' }
let el4=(
    <ul>
        {/*第一种写法return*/}
        <li>第一种写法return</li>
        {
            lessons.map((item,index)=>{
                return <li key={index}>{toLesson(item)}</li>
            })
        }
        <li></li>
        <li>第二种写法：没有return</li>
        {/*第二种写法：没有return*/}
        {
            lessons.map((item,index)=>(
                <li key={index}>{toLesson(item)}</li>
            ))
        }
        <li></li>
        <li>条件判断：》9000原的价格再显示</li>

        {/*第二种写法：没有return；null再react中也是一个合法的元素，表示不存在*/}
        {

            lessons.map((item,index)=>(
                item.price>900?(<li key={index} className='red' style={style}>{toLesson(item)}</li>):null
            ))
        }
    </ul>
)
//6：JSx中的普通属性跟html一样； 特殊属性class,for；style必须是对象；
//7：危险的插入innerHTML XXS攻击，基本用不到
let bable='<h1>纯标签</h1>  '
let el5=(
    <ul>
        <li dangerouslySetInnerHTML={{__html:bable}}></li>
    </ul>
)
ReactDOM.render(el5, document.getElementById('root'));
registerServiceWorker();

JSX中的if else写法
方案一：

class HelloMessage extends React.Component {
  render (){
    let userMessage;
    if (this.props.loggedIn) {
      userMessage = (
        <span>
          <h2>{ `Welcome Back ${ this.props.name }` }</h2>
          <p>You can visit settings to reset your password</p>
        </span>
      )
    } else {
      userMessage = (
        <h2>Hey man! Sign in to see this section</h2>
      )
    }
    return(
      <div>
        <h1>My Super React App</h1>
        { userMessage }
      </div>
    )
  }
}

方案二：

class HelloMessage extends React.Component {

  renderUserMessage(){
    if (this.props.loggedIn) {
      return (
        <span>
          <h2>{ `Welcome Back ${ this.props.name }` }</h2>
          <p>You can visit settings to reset your password</p>
        </span>
      );
    } else {
      return (
        <h2>Hey man! Log in to see this section</h2>
      );
    }
  }

  render (){        
    return(
      <div>
        <h1>My Super React App</h1>
        { this.renderUserMessage() }
      </div>
    )
  }
}

方案三：

class HelloMessage extends React.Component {
  render (){        
    return(
      <div>
        <h1>
          { this.props.loggedIn ?  'You are logged In' : 'You are not logged In' }
        </h1>
      </div>
    )
  }

方案四：

class HelloMessage extends React.Component {
  render (){
    return(
      <div>
        <h1>My Super React App</h1>
        { this.props.loggedIn ?
            <span>
              <h2>{ `Welcome Back ${ this.props.name }` }</h2>
              <p>You can visit settings to reset your password</p>
            </span>
            :
            <h2>Hey man! Log in to see this section</h2>
        }
      </div>
    )
  }
}

方案五：

// 拆分成小函数
class HelloMessage extends React.Component {
  renderLogin() { // 如果这里有多行，推荐用这种方法
    const {loggedIn, name} = this.props;
    if (!loggedIn) return;

    return (<span>
      <h2>Welcome Back {name}</h2>
      <p>You can visit settings to reset your password</p>
    </span>);
  }

  render (){
    return(
      <div>
        <h1>My Super React App</h1>
        {this.renderLogin()}
      </div>
    );
  }
}

综上：短小的字段判断只能用三元表达式，如果是大块的元素都需要区分，就要利用变量了。

来源：https://blog.csdn.net/wmzy1067111110/article/details/51538241