react 函数式组件中使用props

最新推荐文章于 2024-08-12 15:52:09 发布

项哈哈想做前端

最新推荐文章于 2024-08-12 15:52:09 发布

阅读量5.4k

点赞数 3

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45780818/article/details/121235214

版权

React 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文对比了函数式组件和类组件中如何访问和使用props。在函数组件中，由于没有组件实例，需通过参数直接获取props；而在类组件中，通过this.props访问props。讲解了如何正确在函数组件中获取props数据并给出了示例代码。

摘要由CSDN通过智能技术生成

我们之前学习的一直是组件实例上的props，是可以通过this访问组件实例的，比如props，可以通过this.props访问，但是在函数式组件中，不存在组件实例。

function Person() {
  return (
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{sex}</li>
      <li>年龄：{age + 1}</li>
    </ul>
  );
}

这是一个比较简单的函数式组件，和上文一样，想展示姓名，性别，年龄信息。

class Person extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number,
    speak: PropTypes.func,
  };
  // 设置默认属性
  static defaultProps = {
    sex: "女",
    age: 18,
  };
  state = {};
  render() {
    const { name, sex, age } = this.props;
    // prop是只读的
    // this.props.name = "jack";
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age + 1}</li>
      </ul>
    );
  }
}

类组件种有一行关键代码

const { name, sex, age } = this.props;

所有的props数据都是从this.props，也就是组件实例对象中取出来的，而在函数式组件中this是undefined。
正确的获取数据方式是从参数中获取

<script type="text/babel">
  function Person(props) {
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
      </ul>
    );
  }
  ReactDOM.render(<Person name="tom" sex="男" />, document.getElementById("test"));
</script>

在这里插入图片描述
完整代码，包括限制

<script type="text/babel">
  function Person(props) {
    const { name, sex } = props;
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
      </ul>
    );
  }
  Person.propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number,
    speak: PropTypes.func,
  };
  Person.defaultProps = {
    sex: "女",
    age: 18,
  };
  ReactDOM.render(
    <Person name="tom" sex="男" />,
    document.getElementById("test")
  );
</script>