Question

我们已经知道如何设置defaultProps。

TestComponent.defaultProps = {
    isTest: true
};

但我经常使用道具作为对象类型。

在家长中，

render(){
    let sample = {
        isTest : true,
        isLoggedIn : true
    }
    return (
        <div>
            <TestComponent sample = {sample} />
        </div>
    )
}

在子组件中，我想将isLoggedIn设置为false作为默认值。如果未设置（或未从父级传递）isLoggedIn，则默认值为true

但我不知道如何为object type

设置defaultProps

TestComponent.defaultProps = {
    sample : {
        isLoggedIn: false
    }
};

怎么做？

Answer 1

您的代码

TestComponent.defaultProps = {
  sample : {
    isLoggedIn: false
  }
};

应该有用。

对于类型验证（propTypes），对这样的嵌套对象道具使用React.PropTypes.shape：

React.PropTypes.shape({
  isLoggedIn: React.PropTypes.bool
})

请参阅文档：https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes

Answer 2

我认为我也遇到了同样的情况，并且如下所示进行了解决（这似乎不是最好的解决方案，但是它正在工作）：

import { Injectable, Inject } from '@angular/core';
import { HttpClient, HttpInterceptor } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { AllItProject } from '../../models/allitproject';


@Injectable({
  providedIn: 'root'
})
export class ProjectDetailService {

  myAppUrl = '';

  constructor(private _http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.myAppUrl = baseUrl;
  }

  getProjectDetails() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/Index').pipe(map(
      response => {
        return response;
      }));
  }

  getAppDevList() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/GetAppDevList')
      .pipe(map(
        response => {
          return response;
        }));
  }

  getBsaList() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/GetBsaList')
      .pipe(map(
        response => {
          return response;
        }));
  }

  getProjectSection() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/GetProjectSection')
      .pipe(map(
        response => {
          return response;
        }));
  }


  getProjectStatus() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/GetProjectStatus')
      .pipe(map(
        response => {
          return response;
        }));
  }

  getAcrDivison() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/GetAcrDivison')
      .pipe(map(
        response => {
          return response;
        }));
  }

  getProjectSubType() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/GetProjectSubType')
      .pipe(map(
        response => {
          return response;
        }));
  }
  getProjectType() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/GetProjectTypes')
      .pipe(map(
        response => {
          return response;
        }));
  }


  getExecutiveSponsor() {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/GetExecutiveSponsor')
      .pipe(map(
        response => {
          return response;
        }));
  }



  getProjectById(id: number) {
    return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/Details/' + id)
      .pipe(map(
        response => {
          return response;
        }));
  }

  saveProject(project: AllItProject) {
    return this._http.post(this.myAppUrl + 'api/AllItProjectsLists/Create', project)
      .pipe(map(
        response => {
          return response;
        }));
  }

  updateProject(project: AllItProject) {
    return this._http.put(this.myAppUrl + 'api/AllItProjectsList/Edit', project)
      .pipe(map(
        response => {
          return response;
        }));
  }

  deleteProject(id: number) {
    return this._http.delete(this.myAppUrl + 'api/AllItProjectsList/Delete/' + id)
      .pipe(map(
        response => {
          return response;
        }));
  }

}

如何为对象类型设置React默认道具

2 个答案: