前端面试宝典

props组件属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props对象</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      // props: 组件的属性，用于组件内外值的传递
      // 注: props是只读的，只能获取，不能修改
      class Hello extends React.Component {
        render() {
          return (
            <h1>
              Hello, {this.props.name1}, {this.props.name2}
            </h1>
          );
        }
      }

      ReactDOM.render(
        <Hello name1="小明" name2="小龙" />,
        document.getElementById("example")
      );

      const values = {
        name1: "小李",
        name2: "小丽",
      };

      ReactDOM.render(
        <Hello name1={values.name1} name2={values.name2} />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

延展操作符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props对象</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return (
            <h1>
              Hello, {this.props.name1}, {this.props.name2}
            </h1>
          );
        }
      }

      const values = {
        name1: "小牛",
        name2: "小狗",
      };

      // ...是延展操作符，把对象的属性值赋到对应的组件中
      ReactDOM.render(
        <Hello {...values} />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

this.props

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props对象</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      class Link extends React.Component {
        render() {
          return <a {...this.props}>{this.props.name}</a>;
        }
      }
      /*
     this.props = {
     href: "http://www.baidu.com",
     name: "百度"
     };
     */
      ReactDOM.render(
        <Link href="http://www.baidu.com" name="百度" />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

key

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props对象</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      // 抛砖引玉demo
      class List extends React.Component {
        render() {
          return (
            <ul>
              {this.props.data.map((e, index) => {
                // 增加key属性避免警告
                return <li key={index}>{e}</li>;
              })}
            </ul>
          );
        }
      }

      ReactDOM.render(
        <List data={[1, 2, 3]}></List>,
        document.getElementById("example")
      );

      // 请结合05-props.html再看
    </script>
  </body>
</html>

this.props.children

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props对象</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      // this.props.children: 代表元素内的子元素
      class ListPro extends React.Component {
        render() {
          return (
            <ul>
              {React.Children.map(this.props.children, (child, index) => {
                // 增加key属性避免警告
                return <li key={index}>{child}</li>;
              })}
            </ul>
          );
        }
      }

      ReactDOM.render(
        <ListPro a="1" b={2}>
          <em>斜体</em>
          <strong>粗体</strong>
          <a href="#">链接</a>
        </ListPro>,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

props默认值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props对象</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      // props指定默认值
      const data = 123;

      class ShowTitle extends React.Component {
        // React 16中使用static属性定义默认props
        static defaultProps = {
          title: "默认标题",
        };

        render() {
          return <h1>{this.props.title}</h1>;
        }
      }

      ReactDOM.render(
        <ShowTitle title={data} />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>