美文网首页
你不知道的React系列(一)JSX

你不知道的React系列(一)JSX

作者: neo_of_matrix | 来源:发表于2023-04-05 14:51 被阅读0次

    JSX 防止注入攻击

    React DOM 在渲染所有输入内容之前,默认会进行转义

    必须引入react

    import React from 'react';
    

    可以使用点语法来引用一个 React 组件

    import { Input } from 'antd';
    const { Search } = Input;
    

    用户定义的组件必须以大写字母开头

    Props 默认值为 “True”

    <MyTextBox autocomplete />
    
    <MyTextBox autocomplete={true} />
    

    属性展开

    function App1() {
      return <Greeting firstName="Ben" lastName="Hector" />;
    }
    
    function App2() {
      const props = {firstName: 'Ben', lastName: 'Hector'};
      return <Greeting {...props} />;
    }
    

    函数作为子元素

    回调函数作为 props.children 进行传递

    // 调用子元素回调 numTimes 次,来重复生成组件
    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>
      );
    }
    

    布尔类型、Null 以及 Undefined 将会忽略

    false, null, undefined, true 不会被渲染

    React.createElement(component, props, ...children) 语法糖

    <MyButton color="blue" shadowSize={2}>
      Click Me
    </MyButton>
    React.createElement(
      MyButton,
      {color: 'blue', shadowSize: 2},
      'Click Me'
    )
    

    相关文章

      网友评论

          本文标题:你不知道的React系列(一)JSX

          本文链接:https://www.haomeiwen.com/subject/kfneddtx.html