jsx 学习

 

1. JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。比如下面的代码：

jsx 

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

编译为

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

2 jsx 类型

JSX 的标签的第一部分决定了 React 元素的类型。

首字母大写的类型表示 JSX 标签引用到一个 React 组件。这些标签将会被编译为直接引用同名变量，所以如果你使用了 <Foo /> JSX 表达式，则 Foo 必须在作用域中

3. jsx 作用域

由于 JSX 编译成React.createElement方法的调用，所以在你的 JSX 代码中，React库必须也始终在作用域中。

4.用户定义组件必须首字母大写

当元素类型以小写字母开头时，它表示一个内置的组件，如 <div> 或 <span>，将导致字符串 'div' 或 'span' 传递给 React.createElement。 以大写字母开头的类型，如 <Foo /> 编译为 React.createElement(Foo)，并且它正对应于你在 JavaScript 文件中定义或导入的组件。

5.可以给组件标签赋值变量 用于渲染不同的组件

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 正确！JSX 标签名可以为大写开头的变量。
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

 6. jsx 的属性

 i .属性可以使用表达式  eg:<Hello foo={1+2+3}/>   ----- props.foo = 6

 ii .组件周围可以使用 if else 语句  

 if(flag){

return <Hello/>

}

iii 属性可以传字符串常量 。如果你没有给属性传值，默认传true

7.jsx 标签的子元素 props.children  可以用于组件嵌套

    i  js 表达式作为子代  你可以将任何 {} 包裹的 JavaScript 表达式作为子代传递。 

      <Hello> {props.foo} </Hello>

    ii  函数作为子代  

 

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

 

8 条件渲染

这在根据条件来确定是否渲染React元素时非常有用。以下的JSX只会在showHeader为true时渲染<Header />组件。

<div>
  {showHeader && <Header />}
  <Content />
</div>

showHeader 为 true时 Header 渲染