React-1-JSX

本文按照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')
);