Respect.js: 기본값을 프로펠러로 설정

Respect.js: 기본값을 프로펠러로 설정

여러분, 저는 간단한 버튼을 만드는 이 컴포넌트를 만들었습니다.

class AppButton extends Component {

  setOnClick() {
    if(!this.props.onClick && typeof this.props.onClick == 'function') {
      this.props.onClick=function(){ alert("Hello"); }
    }
  }

  setMessage() {
    if(!this.props.message){
        this.props.message="Hello"
    }
  }

  render(){
    this.setOnClick()
    this.setMessage()
    return (
      <button onClick={this.props.onClick}>{this.props.message}</button>
    )
  }
}

그리고 2개의 버튼을 렌더링하는 다른 컴포넌트가 있습니다.

class App extends Component {
  render() {
    return (
          <AppButton onClick={function(){ alert('Test Alert') } } message="My Button" />
          <AppButton />
    );
  }
}

다만, 다음의 에러가 표시됩니다.

TypeError: 속성 "message"를 정의할 수 없음: 개체를 확장할 수 없습니다.

이 줄에 이렇게 써 있어요.

        this.props.message="Hello"

방식대로setMessage의AppButton학급.

편집 1

리액트 어플리케이션을 생성했습니다.npm그리고 저입니다.package.json다음과 같은 내용이 있습니다.

{
  "name": "sample",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

default Props는 다음과 같은 작업을 수행해야 합니다.

import PropTypes from 'prop-types';

class AppButton extends Component {
 render(){
    return (
      <button onClick={this.props.onClick}>{this.props.message}</button>
    )
  }
};

AppButton.propTypes = {
  message: PropTypes.string,
  onClick: PropTypes.func
};

AppButton.defaultProps = {
  message: 'Hello',
  onClick: function(){ alert("Hello"); }
};

문서에서:

부모 컴포넌트에 의해 지정되지 않은 경우 defaultProps를 사용하여 this.props.name의 값이 지정되도록 합니다.propTypes 유형 검사는 defaultProps가 해결된 후에 이루어지므로 유형 검사는 defaultProps에도 적용됩니다.

알기 쉽게 편집:넌 필요 없어setMessage이 예에서는,

return (
      <button onClick={this.props.onClick}>{this.props.message || "Default text"}</button>
);

그러면 prop 값이 확인되고 정의되지 않았거나 null인 경우 기본 메시지가 prop를 대체합니다.

청각장애 소품이라면 이렇게 할 수 있다.

 const { 
     message = '', 
     onClick = (e)=>{} 
 } = props;

또한 이러한 변수를 키워드 없이 사용합니다(정의되지 않은 소품 값에 대해서도 소품을 사용할 수 있습니다).

<button onClick={onClick}>{message}</button> 
{props.value}

그러나 오류는 다음과 같이 처리해도 됩니다.

{props.message ?? ''}

React v.14 이상을 사용하고 있습니까?소품 오브젝트는 동결되어 변경할 수 없습니다.대신 React.cloneElement를 사용할 수 있습니다.

소품을 설정할 수 없습니다. 대신 state를 사용해야 합니다.

값을 변경해야 할 경우 소품이 정적이므로 해당 상태로 저장해야 합니다.

이 작업은 다음과 같이 수행해야 합니다.

this.setState({message: 'your message'});

렌더링 방법에서는 다음과 같이 사용합니다.

{this.state.message}

권장사항으로 컨스트럭터의 해당 값을 사용하여 상태를 초기화해야 합니다.

constructor(props){
  super(props);

  this.state = {
    message: ''
  }
}

에게 같은 일이 일어날 것이다.setOnClick

이것에 대한 좋은 설명을 여기서 찾을 수 있을 것이다.

언급URL : https://stackoverflow.com/questions/44419650/react-js-set-a-default-value-into-a-prop