React-1-JSX

最新推荐文章于 2023-12-03 20:43:03 发布

香辣素毛肚

最新推荐文章于 2023-12-03 20:43:03 发布

阅读量148

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/qq_34153210/article/details/105434885

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

本文按照React官方文档的脉络进行总结

以React-学习目录的demo为基础

1.大括号

大括号包裹变量

import React from 'react';
import ReactDOM from 'react-dom';
const headContent='你好';
class App extends React.Component{
	render(){
		return (<h1>{headContent}</h1>)
	}
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

也可以执行函数表达式

import React from 'react';
import ReactDOM from 'react-dom';
const name='德玛'
function getName(name){
	return '我叫'+name;
}
class App extends React.Component{
	render(){
		return (<h1>{getName(name)}</h1>)
	}
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

其中 return <h1>...</h1>等价于React.createElement('h1','','...‘;

import React from 'react';
import ReactDOM from 'react-dom';
const name='德玛'

class App extends React.Component{
	render(){
		return React.createElement('h1','','你好'+'我叫'+name);
	}
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);