React Native组件中如何打印this.props的所有键？

嘿，这个需求其实很容易实现，我给你几个实用的方法，还会帮你修正一下你代码里的小问题：

1. 最直接的方法：使用Object.keys() #

Object.keys()方法会返回一个包含对象所有可枚举属性键的数组，刚好适合用来获取this.props的所有键。

不过注意：你的constructor里没有接收props参数，也没传给super()，这会导致在constructor里this.props是undefined！先把这个问题修正，再打印：

export default class TapBar extends React.Component{ 
  // 一定要接收props并传给super
  constructor(props) { 
    super(props); 
    // 打印所有props的键
    console.log("当前props的所有键：", Object.keys(this.props));
  }
}

2. 同时查看键和对应的值：用console.table() #

如果你不仅想看到键，还想直观看到每个键对应的值，可以用console.table()，它会把props以表格形式输出，可读性更强：

componentDidMount() {
  // 生命周期方法里打印也可以，这里this.props肯定能拿到
  console.table(this.props);
}

3. 简单打印整个props对象 #

如果只是想快速查看所有props，直接打印this.props也可以，浏览器或调试工具会展开显示所有键值对：

console.log("完整props对象：", this.props);

小提醒 #

• 如果你在constructor里不传递props给super()，那在constructor内部this.props是取不到的，但在其他生命周期方法（比如componentDidMount）或者渲染方法里是可以正常获取的。所以最好养成在constructor里传props的习惯，避免不必要的问题。
• 如果你的组件后续改成函数组件，直接用Object.keys(props)就可以实现同样的效果啦。

内容的提问来源于stack exchange，提问作者muyoungko