React: ES6 클래스 구문의 기본 소품

componentWillReceiveProps가 호출될 때 기본 props는 이미 병합되어 있어야 합니다.

componentWillReceiveProps가 호출될 때 기본 props는 이미 병합되어 있어야 합니다.

내가 말할 수 있는 한 getDefaultProps 는 ES6 클래스 구문을 사용할 때 호출되지 않습니다.

맞습니다. 대신 다음과 같이 작성합니다.

class Control extends React.Component {

  // ...

  componentWillReceiveProps(props) {
    // Do something with props...
  }

}
Control.defaultProps = {value: ''};

그게 당신을 위해 작동합니까?

아, 죄송합니다. 지금 문서에서 확인했습니다. 감사 해요!

Google 검색을 통해 여기에 도착했고 코드를 캡슐화하는 데 class 를 선호하기 때문에 기본 소품은 다음과 같이 계산된 속성을 사용하여 설정할 수 있습니다.

import React, {Component, PropTypes} from 'react'
class DefaultPropsExample extends Component {
  static defaultProps = {
    ...Component.defaultProps,
    instructions: 'Usage instructions not provided.',
  }
}

@jhabdas 당신이 준 것은 ES2015 구문이 아닙니다. 내가 static props를 사용하면 Babel에서 예기치 않은 토큰이 발생하지만 es2015에서 나와 같은 작업을 하는 사람들을 위해 작동하는 항목이 있습니다.

import React from 'react';
export default class extends React.Component {

  static get defaultProps() {
    return {
      // stuff you want :)
    }
  }

}

업데이트

@zpao 의 링크를 설치한 후 정적 속성을 사용할 수 있습니다 ...

@Gopikrishna19 클래스 속성 제안을 구현하는 다른 babel 플러그인을 활성화해야 합니다. http://babeljs.io/docs/plugins/transform-class-properties/

@zpao 오오 ! 오늘 또 다른 새로운 것들 :) 그것을 시도할 것입니다, 대단히 감사합니다!

@Gopikrishna19 실제로 게시한 코드 조각이 마음에 듭니다. 기본 소품을 초기화하기 전에 사전 처리를 할 수 있습니다. 언급해 주셔서 감사합니다.

이것은 작동하는 것 같고 내 의견으로는 더 우아합니다.

....

 static defaultProps = {
      //someDefaultProps
  };

  constructor(props, defaultProps) {
    super(props, defaultProps);
  }

....

@fxhereng 두 번째 인수는 context 용으로 예약되어 있으므로 향후 릴리스에서 중단될 수 있으므로 일부 사용자 정의 의미로 재정의하지 않을 것입니다.

Ok @gaearon 기본 소품을 설정하는 가장 좋은 방법은 무엇입니까?

감사 해요,

이에 대한 권장 방법은 무엇입니까?

실험적 변환 http://babeljs.io/docs/plugins/transform-class-properties/ 를 사용하는 경우 static defaultProps = {...}; 만 사용할 수 있습니다. 생성자를 변경할 필요가 없습니다. 그렇지 않으면 외부에 할당해야 합니다.

class X extends React.Component {
}
X.defaultProps = {...};

또한..

class X extends React.Component {
  props = {
    ...
  }
}

@efernandesng 지원되지 않는 패턴입니다. defaultProps 처럼 작동하지 않으며 this.props 를 변경하지 않아야 합니다.

defaultProps를 부모 클래스와 함께 인스턴스화하여 해당 소품을 다른 자식 클래스에 전달할 수 없는 것 같습니다.

그렇게하는 표준 es6 방법이 있습니까? 여기에 있는 모든 방법은 저에게 적합하지 않습니다.

defaultProps를 부모 클래스와 함께 인스턴스화하여 해당 소품을 다른 자식 클래스에 전달할 수 없는 것 같습니다.

무슨 말씀이신지 이해가 되지 않습니다. 예를 보여줄 수 있습니까?

물론 죄송합니다.

다음은 구성 요소입니다.

import React, 
{
  Component,
  PropTypes
}                     from 'react';
import { TimerView }  from './TimerView'

class Timer extends Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(props) {
    console.log('Will receive props')
  }

  render() {
    console.log("Timer loaded")

    return (
      <TimerView {...props} />
    )
  }
}

Timer.propTypes = {
  status: PropTypes.string.isRequired,
};

Timer.defaultProps = {
  status: "This is the Timer",
};

export default Timer;

webpack-dev-server를 실행하면 다음 오류가 발생합니다.
Uncaught ReferenceError: props is not defined

내가 뭔가 잘못하고 있는게 틀림없어...

props 은 render() 메서드의 바인딩되지 않은 변수입니다. <TimerView {...this.props} /> 이어야 합니다.

어머.
나는 이것을 완전히 놓쳤다. 나는 상태 비저장 구성 요소를 클래스만큼 많이 사용하기 때문에 이것에 대해 혼란스러워했습니다.

감사합니다.

문제없어요 @jeanmichelcote! 그것은 일어난다 :)

defaultProps를 정의하기 위해 다른 props에 액세스하는 것은 안티 패턴으로 간주됩니까?

class Comp extends from React.Component {
  static propTypes: {
    num: React.PropTypes.number.isRequired,
    action: React.PropTypes.func,
  };

  static defaultProps: {
    action: () => console.log(this.props.num), // "this" is invalid in static context
  };

  render() {
    return (
      <button onClick={this.props.action}>
        {`Log #${this.props.num}`}
      </button>
    );
  }
}

@romulof 정적 메서드에서 인스턴스 변수를 참조하려는 것 같습니다. 어떤 this 에 대해 이야기하고 있는지 알 수 있는 방법이 없기 때문에 그렇게 할 수 없습니다. 정의에 따르면 정적 사물은 항상 인스턴스 컨텍스트 외부에 있습니다.

@romulof 그것은 모든 객체 지향 언어에 공통적입니다. 뚱뚱한 화살표 구문은 정의된 컨텍스트에 바인딩됩니다. 아마도 다음을 사용해 볼 수 있습니다.

static defaultProps: {
    action: function() {
        console.log(this.props.num), // "this" depends on the context where it is run
    }
};

@sbussard : 맞습니다.

내 질문은 defaultProps 이 정적 개체로 구현되는 것에 관한 것입니다.
아마도 생성자에 의해 호출되는 함수가 될 수 있습니다.

최적화 컴파일러가 호출 사이트에서 인라인할 수 있도록 의도적으로 클래스 외부에 있습니다.

그래서 최종 답은 무엇입니까?

@gaearon 언급

최적화 컴파일러가 호출 사이트에서 인라인할 수 있도록 의도적으로 클래스 외부에 있습니다.

하지만 "클래스 인스턴스 필드" 및/또는 "클래스 정적 필드"를 사용할 때 최적화할 수 없다는 의미입니까? 나는 어떤 접근 방식이 선호되고 왜 그런지 이해하려고 노력하고 있다고 생각합니다.

그래서 최종 답은 무엇입니까?

ES6을 고수하고 싶다면 맨 아래에 할당하십시오.

class MyComponent extends Component { /* ... */ }
MyComponent.defaultProps = { /* ... */ };

Create React App을 사용 중이거나 실험적 구문에 익숙하고 클래스 속성 변환을 활성화한 경우 다음을 수행할 수 있습니다.

class MyComponent extends Component {
  static defaultProps = { /* ... */ };
  /* ... */
}

이러한 접근 방식은 완전히 동일합니다. 데코레이터도 사용하는 경우 이러한 변환을 결합하는 이상한 버그 가 있을 수 있습니다. 따라서 클래스 속성과 함께 데코레이터를 사용하는 것은 권장하지 않습니다.

이게 도움이 되길 바란다!

하지만 "클래스 인스턴스 필드" 및/또는 "클래스 정적 필드"를 사용할 때 최적화할 수 없다는 의미입니까? 나는 어떤 접근 방식이 선호되고 왜 그런지 이해하려고 노력하고 있다고 생각합니다.

마지막에 할당하는 것과 클래스 속성을 사용하는 것에는 차이가 없습니다. 할당할 클래스 속성 desugar. 어떤 코드가 컴파일되는지 확인하려면 Babel 웹사이트에서 REPL을 사용하십시오.

@romulof가 이야기하는 동일한 문제에 대해 궁금합니다. 물론 static defaultProps 를 사용하여 기본 속성을 정의할 수 있지만 컨텍스트를 사용하려면 어떻게 해야 합니까?

이것이 왜 유용한가요?

title 및 onSubmit 소품이 있는 일반 모달 구성 요소가 있습니다. 때로는 같은 소품으로 내 앱의 완전히 다른 부분에서 모달을 사용하고 싶습니다. title 이것은 잘 작동합니다.

class CreateUserModal extends Modal {
  static defaultProps = { title: 'Create a new user' }
}

그러나 적절한 코드 덩어리인 onSubmit 핸들러는 연결 redux에서 채워진 prop을 사용하기 때문에 컨텍스트가 필요합니다. 컨텍스트를 부모 클래스의 props를 설정하는 데 사용할 수 없기 때문에 현재 이 코드를 추상화할 방법이 없습니다.

내가하려고하는 것은 실제로 안티 패턴이 아니므로 (또는 적어도 그렇지 않다고 생각합니다) 다른 방법이 있는지 궁금합니다.

나는 내가 같은 것을 할 수 있기를 바랐다.

class CreateUserModal extends Modal {
  constructor (props) {
    super({
      title: 'Create a new user',
      onSubmit: () => {
        // do a load of stuff using props
      }
    })
  }
}

하지만 작동하지 않습니다.

@roberttod 문제에 대한 해결책을 찾았습니까? 감사 해요

후속 질문을 하고 싶습니다.
반응 앱 만들기(react-scripts v1.0.12)를 사용하는 경우 초기 상태를 다음과 같이 정의해도 됩니까?

class Foo extends Component {
  static defaultProps = {};

  static propTypes = {};

  state = {...};
}

생성자를 사용하여 초기 상태를 다음과 같이 정의하는 것과 비교하여 차이점은 무엇입니까?

class Foo extends Component {
  static defaultProps = {};

  static propTypes = {};

  constructor(props) {
    super(props);

    this.state = {...};
  }
}

특히 첫 번째 접근 방식에 성능에 영향이 있습니까?

별반 다를게 없이 똑같습니다.

@jhabdas 글쎄, defaultProps가 다음과 같이 정의될 때:

static defaultProps = {
}

이후 클래스 메소드에서 액세스하는 방법:

this.defaultProps

undefined 반환합니다.

@majioa 해당 클래스 수준 API에 대해서는 모르지만 한 가지 아이디어는 기본 props를 별도의 개체로 캐시하고 참조하는 것입니다. 어떻게 생각하나요?

@majioa

class Foo extends React.Component {
  static defaultProps = { param: 1 };
  render() {
    return Foo.defaultProps.param;
  }
}

같은 문제가 발생하면 babel-plugin-transform-class-properties를 설치해야

npm install -D babel-plugin-transform-class-properties

그런 다음 .babelrc에 "transform-class-properties" 를 추가합니다.

{
  "presets": ["env", "react"],
  "plugins": ["react-hot-loader/babel", "transform-class-properties"]
}

정적 get defaultProps() {
반품 {
자동차: "메르세데스"
}

@Arm7107 요소가 생성될 때마다 새로운 객체를 생성하기 때문에 비효율적입니다. 나는 이것을 사용 하지 않는 것이 좋습니다. 속성을 할당합니다.

MyComponent.defaultProps = {
  // ...
}

또는 실험적 정적 클래스 속성 구문을 사용하십시오.

class MyComponent extends React.Component {
  static defaultProps = {
    // ...
  };

  // ...
}

(바벨 플러그인이 필요합니다)

Google 검색결과에 잘못된 제안이 더 이상 표시되지 않도록 이 문제를 잠그겠습니다.