reactjs - 无法引用类组件中立即解构的 props,我每次都必须使用 `this.props` 吗?

标签 reactjs components destructuring

在无状态函数组件中,我们可以使用解构的 props 作为函数参数:

const Blah = ({ hello, world }) {
  return <div>{hello} {world}</div>
}

这提供了非常干净的代码,不仅很明显正在传递什么 Prop ,而且我们不必到处使用 this.props

必须在 class 组件中始终使用 this.props 可能会占用整个组件的大量空间,并且使用起来不太好:

class Blah extends Component {
  render() {
    return (
      <div>{this.props.hello} {this.props.world}</div>
    )
  }
}

我的问题是,我们可以对 class 组件采取什么类似的方法,这样我们就不必到处使用 this.props

我能想到的一个解决方案是解构 render 方法中的 props,但是当然,您必须对 中的每个方法都执行此操作>class 如果您想使用解构名称。

最佳答案

不,恐怕没有办法。功能组件本质上是类组件的 render() 函数,“清洁度”实际上有点相同(:

关于reactjs - 无法引用类组件中立即解构的 props,我每次都必须使用 `this.props` 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43676833/

相关文章:

Angular 2 - 在 Promise 中更改模型时 GUI 不更新

javascript - JavaScript 中全局正则表达式匹配的干净数组解构

javascript - 如果用户未登录,则重定向到主页时出现内存泄漏错误

javascript - 如何在 React Material-UI 中更改事件选项卡 inkBarStyle 颜色和厚度?

android - 在 Android 中用图像填充自定义组件

javascript - react : TypeError: Cannot read properties of null (reading 'useContext' ) when trying to use react-bootstrap container

variable-assignment - *为什么*列表分配会变平其左侧?

javascript - 函数参数中的解构和重构?

javascript - react native 如何用一个函数合并两个数组

reactjs - 有没有办法虚拟化(例如使用react-window)antd嵌套表?