React学习4（组件实例三大核心之props）

最新推荐文章于 2025-05-01 11:59:36 发布

原创最新推荐文章于 2025-05-01 11:59:36 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript

props基本使用

从组件外部传入数据，可以在组件标签内部进行传递，传递后到组件实例中的props属性当中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>props基本使用</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test"></div>
  <div id="test2"></div>
  <div id="test3"></div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>

  <script type="text/babel">
  // 1.创建组件
  class Person extends React.Component {
    render() {
      console.log(this);
      // props是只读的
      const {name,sex,age} = this.props
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }
  // 2.渲染组件
  ReactDOM.render(<Person name='tom' sex='男' age={18}/>, document.getElementById('test'))
  ReactDOM.render(<Person name= 'jerry' sex= '女' age = {20}/>, document.getElementById('test2'))
 
  const p = {name:'老刘', sex:'男', age: 55}
  ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))

  </script>
</body>
</html>

props进行类型限制

在对props进行限制时有类型限制，必要性限制和默认值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对props进行限制</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test"></div>
  <div id="test2"></div>
  <div id="test3"></div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>
  <!---引入prop-types，用于对组件标签属性进行限制-->
  <script src="../js/prop-types.js"></script>

  <script type="text/babel">
  // 1.创建组件
  class Person extends React.Component {
    render() {
      // console.log(this);
      const {name,sex,age} = this.props
      //props是只读的
      //this.props.name= 'jerry'//此行代码会报错，因为props是只读的
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }
  // 对标签属性进行类型，必要性的限制
  Person.propTypes = { // propTypes是react底层寻找的东西
      name:PropTypes.string.isRequired,   //PropTypes是reactd的内置属性,限制name必传且为字符串
      sex:PropTypes.string,// 限制sex为字符串
      age:PropTypes.number,// 限制age为数字
      speak:PropTypes.func// 限制speak为函数
    }
    // 对标签属性进行默认值的限制
  Person.defaultProps = {
    sex:'人妖',// sex默认为人妖
    age:99//age默认为99
  }
  // 2.渲染组件
  ReactDOM.render(<Person name='tom' speak= {speak}/>, document.getElementById('test'))
  ReactDOM.render(<Person name= 'jerry' sex= '女' age = {20}/>, document.getElementById('test2'))
 
  const p = {name:'老刘', sex:'男', age: 55}
  ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))

  // ReactDOM.render(<Person name= '老刘' sex= '男' age= '30'/>, document.getElementById('test3'))
  
  function speak() {
    console.log('我说话了')
  }
  </script>
</body>
</html>

props简写形式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>props的简写方式</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test"></div>
  <div id="test2"></div>
  <div id="test3"></div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>
  <!---引入prop-types，用于对组件标签属性进行限制-->
  <script src="../js/prop-types.js"></script>

  <script type="text/babel">
  // 1.创建组件
  class Person extends React.Component {
      // 对标签属性进行类型，必要性的限制
        static propTypes = { // propTypes是react底层寻找的东西
          name:PropTypes.string.isRequired,   //PropTypes是reactd的内置属性,限制name必传且为字符串
          sex:PropTypes.string,// 限制sex为字符串
          age:PropTypes.number,// 限制age为数字
          speak:PropTypes.func// 限制speak为函数
        }
        // 对标签属性进行默认值的限制
        static defaultProps = {
        sex:'人妖',// sex默认为人妖
        age:99//age默认为99
      }
    render() {
      // console.log(this);
      const {name,sex,age} = this.props
      //props是只读的
      //this.props.name= 'jerry'//此行代码会报错，因为props是只读的
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }

  // 2.渲染组件
  ReactDOM.render(<Person name='tom' speak= {speak}/>, document.getElementById('test'))
  ReactDOM.render(<Person name= 'jerry' sex= '女' age = {20}/>, document.getElementById('test2'))
 
  const p = {name:'老刘', sex:'男', age: 55}
  ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))

  function speak() {
    console.log('我说话了')
  }
  </script>
</body>
</html>

个人总结：

对类组件中的属性进行类型限制的时候，在传递了数据之后，该数据会直接显示在实例对象props

内部，在进行类型限制的时候可以在类组件外部进行限制，也可以在类组件内部（render函数上

方）进行限制，但是优先在类组件的render函数内部进行限制，因为这是简写显示

在类组件外部进行条件限制的时候给哪个类组件进行限制（此处数据类型首字母小写）就进行如下

写法：

/数据类型进行限制：

类名.propTypes = {
 name:PropTypes.string.isRequired,   //PropTypes是reactd的内置属性,限制name必传且
为字符串
 sex:PropTypes.string,// 限制sex为字符串
 age:PropTypes.number,// 限制age为数字
 speak:PropTypes.func// 限制speak为函数
}

// 数据类型默认限制：
类名.defaultProps = {
 sex:'人妖',// sex默认为人妖
 age:99//age默认为99

}

在类组件内部进行类型限制时只需要把类名修改为static，同时取消类名后面的点即可：

//数据类型进行限制：

static propTypes = {
 name:PropTypes.string.isRequired,   //PropTypes是reactd的内置属性,限制name必传且
为字符串
sex:PropTypes.string,// 限制sex为字符串
age:PropTypes.number,// 限制age为数字
speak:PropTypes.func// 限制speak为函数
}

// 数据类型默认限制：
static defaultProps = {
 sex:'人妖',// sex默认为人妖
 age:99//age默认为99

}

类式组件的构造器与props

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类式组件中构造器与props关系</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test"></div>
  <div id="test2"></div>
  <div id="test3"></div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>
  <!---引入prop-types，用于对组件标签属性进行限制-->
  <script src="../js/prop-types.js"></script>

  <script type="text/babel">
  // 1.创建组件
  class Person extends React.Component {
    //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
    constructor(props) {
      super(props)
      console.log('constrctor', this.props);
    }
      // 对标签属性进行类型，必要性的限制
        static propTypes = { // propTypes是react底层寻找的东西
          name:PropTypes.string.isRequired,   //PropTypes是reactd的内置属性,限制name必传且为字符串
          sex:PropTypes.string,// 限制sex为字符串
          age:PropTypes.number,// 限制age为数字
          speak:PropTypes.func// 限制speak为函数
        }
        // 对标签属性进行默认值的限制
        static defaultProps = {
        sex:'人妖',// sex默认为人妖
        age:99//age默认为99
      }
    render() {
      // console.log(this);
      const {name,sex,age} = this.props
      //props是只读的
      //this.props.name= 'jerry'//此行代码会报错，因为props是只读的
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }

  // 2.渲染组件
  ReactDOM.render(<Person name='tom'/>, document.getElementById('test'))
  </script>
</body>
</html>

函数式组件使用props

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数式组件使用props</title>
</head>
<body>
  <!---准备好一个容器-->
  <div id="test"></div>
  <div id="test2"></div>
  <div id="test3"></div>

  <!---引入核心库,必须最先引入-->
  <script src="../js//react.development.js"></script>
  <!---引入react-dom，用于支持react操作dom，其次引入-->
  <script src="../js/react-dom.development.js"></script>
  <!---引入babel，用于将jsx转化为js，最后引入-->
  <script src="../js/babel.min.js"></script>
  <!---引入prop-types，用于对组件标签属性进行限制-->
  <script src="../js/prop-types.js"></script>

  <script type="text/babel">
  // 1.创建函数式组件
  function Person(props) {
    console.log(props)
    const {name, sex, age} = props
    return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age}</li>
        </ul>
      )
  }

  //对标签属性进行类型，必要性的限制
  Person.propTypes = { // propTypes是react底层寻找的东西
    name:PropTypes.string.isRequired,   //PropTypes是reactd的内置属性,限制name必传且为字符串
    sex:PropTypes.string,// 限制sex为字符串
    age:PropTypes.number,// 限制age为数字
    speak:PropTypes.func// 限制speak为函数
  }
// 对标签属性进行默认值的限制
  Person.defaultProps = {
  sex:'人妖',// sex默认为人妖
  age:99//age默认为99
  }
  // 2.渲染组件
  ReactDOM.render(<Person name='tom' />, document.getElementById('test'))
  </script>
</body>
</html>