[JavaScript知识库]React_3 JSX 中使用JS语法

在JSX中使用js语法方法如下：

const name ='张三';
const age=18;
const title =( <span>姓名{name}年龄{age}</span>)
ReactDOM.render(title,document.getElementById('root');

注意：使用单花括号{ }嵌入要实用的变量或方法，而不是双花括号{{}}

根据以上基础，可实现如下条件渲染：

const isLoading=true;
const showLoading=()=>{
    if(isLoading){ 
       return <div>loading...</div>
    }
     return <div>数据加载完成后内容</div>
}
const content =(<div>条件渲染：{showLoading()}</div>)
ReactDOM.render(title,document.getElementById('root');

也可以使用三元表达式：

const isLoading=true;
const showLoading=()=>{
    return isLading?(<div>loading...</div>):(<div>数据加载完成后内容</div>)
}
const content =(<div>条件渲染：{showLoading()}</div>)
ReactDOM.render(title,document.getElementById('root');