当前位置: 首页 > 面试题库 >

如何在React组件上设置组件默认道具

贾兴学
2023-03-14
问题内容

我使用下面的代码在React组件上设置默认道具,但是它不起作用。在该render()方法中,我可以看到输出“ undefined
props”已打印在浏览器控制台上。如何为组件道具定义默认值?

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

问题答案:

您忘记合上Class支架了。

class AddAddressComponent extends React.Component {

  render() {

    let {provinceList,cityList} = this.props

    if(cityList === undefined || provinceList === undefined){

      console.log('undefined props')

    } else {

      console.log('defined props')

    }



    return (

      <div>rendered</div>

    )

  }

}



AddAddressComponent.contextTypes = {

  router: React.PropTypes.object.isRequired

};



AddAddressComponent.defaultProps = {

  cityList: [],

  provinceList: [],

};



AddAddressComponent.propTypes = {

  userInfo: React.PropTypes.object,

  cityList: React.PropTypes.array.isRequired,

  provinceList: React.PropTypes.array.isRequired,

}



ReactDOM.render(

  <AddAddressComponent />,

  document.getElementById('app')

)


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app" />


 类似资料:
  • 本文向大家介绍如何给非控组件设置默认的值?相关面试题,主要包含被问及如何给非控组件设置默认的值?时的应答技巧和注意事项,需要的朋友参考一下 表单元素依赖于状态(state),表单元素需要默认值实时映射到状态的时候,就是受控组件 不通过state控制表单元素,而是通过ref来控制的表单元素就是非受控组件

  • 我可以为我的vaadin fileupload组件设置默认上载路径吗?我想设置一些上载路径到我的vaadin组件。如果有人不选择上传任何文件,我的特定文件将被上传。有可能吗? 例如:I would like to do as

  • 当对输入字段使用默认值时,如何绕过带有道具状态的反模式? 在呈现窗体时,它应该包含一些默认值。当我设置一些值并关闭表单,然后重新打开表单时,我希望显示默认值,而不是以前输入的值······ 但是当我让state从道具继承值时,道具就永远改变了。我还没找到绕过这个的方法。

  • 问题内容: 什么是对React组件prop更新进行单元测试的正确方法。 这是我的测试装置; 这可以正常工作,并且测试通过了,但是显示了反应警告消息 我要测试的只是属性的更新,而不是使用其他属性创建元素的新实例。有没有更好的方法来执行此属性更新? 问题答案: AirBnB的酶库为这个问题提供了一个优雅的解决方案。 它提供了一个setProps方法,可以在浅包装或jsdom包装上调用该方法。

  • 我正在研究bean验证,我正在寻找一种可能性来设置我自己的bean验证注释的默认组。 我有这样的东西(工作): RequiredBySecondStepValidator.class(一个实现的约束验证器) secondstep.class(bean验证组) 不幸的是,根据规范,不可能在注释中设置默认组,如下所示: