React学习使用应注意的点（JSX）

JSX

1. 当使用组件时，标签名一定要是大写开头否则会报错

const JsxComponent = (props) => (<div>Hello React</div>)
/** right **/
ReactDOM.render(
  <JsxComponent/>,
  document.getElementById('root')
);

/** error**/
error: The tag <jsxComponent> is unrecognized in this browser.
ReactDOM.render(
  <jsxComponent/>,
  document.getElementById('root')
);

2. 可通过的props.children获取到父组件传进本组件的子元素、表达式、甚至是函数

const JsxComponent = (props) => {
	const items = new Array(10).fill(0).map((item, index) => props.children(index));
	return (
 <div>	
   {items}
	</div>)
}

const Hello = (props) =>(
  <JsxComponent>
    {(index) => <div key={index}>This is {index} </div>}
  </JsxComponent>)
);