代码之家 › 专栏 › 技术社区 › tallpaulk

为React类组件中的变量指定props

reactjs

tallpaulk · 技术社区 · 6 年前

我有一个简单的反应成分。我想在component方法中为 props . 我尝试过这种方法,它适用于功能组件:

class Pets extends React.component {
  constructor(props) {
    super(props)
  }

 const {dog, cat, frog} = props
 // the code on the line above does not work

 render() {
   return (
     <div>
       {dog.name}
       {cat.name}
     </div>
   )
 }
}

1 回复 | 直到 6 年前

Arup Rakshit 6 年前

那是行不通的。 props 是使用创建的组件实例的属性 <Pets /> 例如JSX。它需要在类的实例方法中 Pets . 如果你在最短的时间内做这件事,它会起作用的 render 方法 const {dog, cat, frog} = this.props 道具 在班子里,你们现在的问题不是他们所期望的。

constructor 功能公正 const {dog, cat, frog} = props 道具 对象作为参数接收。所以 this.props (会议结束后) super(props) and 道具是同一个对象。

创建一些输出,所以它就在那里。我试着用这个答案解释什么 道具 表示在类主体和实例方法主体中,如何访问用不同的方法等 xadm said ,将它们解包到构造函数中,并认为稍后将在其他方法中访问它们,但由于作用域边界的原因,这些方法将不起作用,除非使用将它们作为属性再次存储到实例中 this.dog = props.dog . 但这是一个可怕的想法,永远不要这样做。只要打开它们,当你需要任何财产道具对象在那个地方。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

3 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

4 月前

noblerare · Vite错误-未定义导出(SSR)

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

4 月前