React组件props的使用

站长

2023年09月04日 18:58 · 阅读数 8

往期回顾：

props的基本使用

react的props的概念和vue的props概念是一样的，都是组件用来接受参数的

类组件中props的写法

我们看下面的示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
      // 1、创建类组件
      class MyComponent extends React.Component {
        render() {
          console.log("MyComponent", this);
          return (
            <ul>
              <li>姓名</li>
              <li>年龄</li>
              <li>性别</li>
            </ul>
          );
        }
      }
      // 渲染组件
      const sex = "女";
      ReactDOM.render(<MyComponent name="小明" age="18" sex={sex} />, document.getElementById("test"));
    </script>
  </body>
</html>

MyComponent实例的props上有我们通过标签传递的参数值

React组件props的使用

那么，要使用这些值，也非常容易了。

<script type="text/babel">
// 1、创建类组件
class MyComponent extends React.Component {
  render() {
    const { name, age, sex } = this.props;
    return (
      <ul>
        <li>姓名:{name}</li>
        <li>年龄:{age}</li>
        <li>性别:{sex}</li>
      </ul>
    );
  }
}
// 渲染组件
const sex = "女";
ReactDOM.render(<MyComponent name="小明" age="18" sex={sex} />, document.getElementById("test"));
</script>

页面效果：

React组件props的使用

函数式组件props的写法

当组件是一个函数时，其参数可以接受到props，我们看看示例

<script type="text/babel">
  function MyComponent(props) {
    console.log("props: ", props);
    return (
      <ul>
        <li>姓名:??</li>
        <li>年龄:??</li>
        <li>性别:??</li>
      </ul>
    );
  }
  // 渲染组件
  const info = { name: "小明", age: 18, sex: "女" };
  ReactDOM.render(<MyComponent {...info} />, document.getElementById("test"));
</script>

可以看到，函数的参数props（形参）可以接受到通过标签传递的所有参数

React组件props的使用

那么，函数式组件使用props也就非常容易了

<script type="text/babel">
  function MyComponent(props) {
    console.log("props: ", props);
    return (
      <ul>
        <li>姓名:{props.name}</li>
        <li>年龄:{props.age}</li>
        <li>性别:{props.sex}</li>
      </ul>
    );
  }
  // 渲染组件
  const info = { name: "小明", age: 18, sex: "女" };
  ReactDOM.render(<MyComponent {...info} />, document.getElementById("test"));
</script>

页面效果：

React组件props的使用

批量传递props值

如果我们想大量传递一些props值的时候，很自然能想到这种方式

<script type="text/babel">
  // 1、创建类组件
  class MyComponent extends React.Component {
    render() {
      const { name, age, sex } = this.props;
      return (
        <ul>
          <li>姓名:{name}</li>
          <li>年龄:{age}</li>
          <li>性别:{sex}</li>
        </ul>
      );
    }
  }
  // 渲染组件
  const info = { name: "小明", age: 18, sex: "女" };
  ReactDOM.render(<MyComponent name={info.name} age={info.age} sex={info.sex} />, document.getElementById("test"));
</script>

这种写法很好理解，但是比较繁琐。react提供一种更简洁的语法糖

 // 渲染组件
const info = { name: "小明", age: 18, sex: "女" };
ReactDOM.render(<MyComponent {...info} />, document.getElementById("test"));

但要注意，{...info}并不是我们ES6所说的拓展运算符，拓展运算符是不能展开对象的，{...info}中的括号是react的变量识别符号，不是一个对象的括号！

props类型限制

类组件中的限制

如果需要对props进行类型限制，在类组件上直接添加propTypes方法即可。

  MyComponent.propTypes = {};

如果需要对props进行默认值设置，在类组件上直接添加defaultProps方法即可。

MyComponent.defaultProps = {};

如果我们使用非脚手架的形式创建项目，还要额外引入一个prop-types.js文件

完整的代码应该长这个样子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 引入组件标签类型声明文件 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/babel">
      // 1、创建类组件
      class MyComponent extends React.Component {
        render() {
          const { name, age, sex } = this.props;
          return (
            <ul>
              <li>姓名:{name}</li>
              <li>年龄:{age}</li>
              <li>性别:{sex}</li>
            </ul>
          );
        }
      }
      // 对标签属性进行类型。必要性的限制
      MyComponent.propTypes = {
        name: PropTypes.string.isRequired, // 限制name必传，且为字符串
        sex: PropTypes.string, // 限制sex为字符串
        age: PropTypes.number, // 限制age为数值
        speak: PropTypes.func, // 限制speak为函数（注意，不能写成function)
      };
      // 对标签默认值进行设置
      MyComponent.defaultProps = {
        sex: "男",
        age: 18,
      };
      // 渲染组件
      const info = { name: "小明" };
      ReactDOM.render(<MyComponent {...info} />, document.getElementById("test"));
    </script>
  </body>
</html>

props的简写方式

给props添加类型限制，我们在组件类上添加了propTypes和defaultProps方法，事实上，我们也可以通过其他方式向类上直接添加属性。

我们先看一个简单的demo

     class People {
        constructor(sex) {
          this.sex = sex;
        }
        static age = 19;
      }
      People.hight = "178";
      const xiaoming = new People("女");
      console.log("xiaoming: ", xiaoming);

React组件props的使用

通过这个示例，我们可以知道在属性前添加static关键词即可让这个属性只存在类本身。那么，props的简写也显而易见了

<script type="text/babel">
  // 1、创建类组件
  class MyComponent extends React.Component {
    // 对标签属性进行类型。必要性的限制
    static propTypes = {
      name: PropTypes.string.isRequired, // 限制name必传，且为字符串
      sex: PropTypes.string, // 限制sex为字符串
      age: PropTypes.number, // 限制age为数值
      speak: PropTypes.func, // 限制speak为函数（注意，不能写成function)
    };
    // 对标签默认值进行设置
    static defaultProps = {
      sex: "男",
      age: 18,
    };
    render() {
      const { name, age, sex } = this.props;
      return (
        <ul>
          <li>姓名:{name}</li>
          <li>年龄:{age}</li>
          <li>性别:{sex}</li>
        </ul>
      );
    }
  }
  // 渲染组件
  const info = { name: "小明" };
  ReactDOM.render(<MyComponent {...info} />, document.getElementById("test"));
</script>

函数式组件如何限定props类型

限定函数式组件的props类型也非常容易

对标签属性进行类型，我们给函数添加propTypes方法即可

 MyComponent.propTypes = { /一些限制代码/ }

对标签默认值进行设置我们给函数添加 defaultProps方法即可

MyComponent.defaultProps = { /一些默认值设置/ }

一个比较完整的代码如下

<script type="text/babel">
  function MyComponent(props) {
    return (
      <ul>
        <li>姓名:{props.name}</li>
        <li>年龄:{props.age}</li>
        <li>性别:{props.sex}</li>
      </ul>
    );
  }
  // 对标签属性进行类型。必要性的限制
  MyComponent.propTypes = {
    name: PropTypes.string.isRequired, // 限制name必传，且为字符串
    sex: PropTypes.string, // 限制sex为字符串
    age: PropTypes.number, // 限制age为数值
  };
  // 对标签默认值进行设置
  MyComponent.defaultProps = {
    sex: "男",
    age: 18,
  };
  // 渲染组件
  const info = { name: "小明", age: 18, sex: "女" };
  ReactDOM.render(<MyComponent {...info} />, document.getElementById("test"));
</script>

我们验证下

标签属性类型验证

// 对标签属性进行类型。必要性的限制
  MyComponent.propTypes = {
    name: PropTypes.string.isRequired, // 限制name必传，且为字符串
    sex: PropTypes.string, // 限制sex为字符串
    age: PropTypes.number, // 限制age为数值
  };
// 渲染组件
const info = { name: "小明", age: "18", sex: "女" };

上述代码中，我们定义了age的类型为数字，但是实际上我们传递了字符18，打开控制台，我们可以看到类型错误的一个报错，说明类型限制生效了

React组件props的使用

默认值设置

  // 对标签默认值进行设置
  MyComponent.defaultProps = {
    sex: "男",
    age: 18,
  };
  // 渲染组件
  const info = { name: "小明"};

上述代码中，我们sex和age的默认值进行了设置，但给标签只传递了name属性，观察页面，我们可以看到sex和age也展示了，这说明默认值的设置也生效了。

React组件props的使用