React.js를 사용하여 속성이 있는지 확인합니다.

React.js를 사용하여 속성이 있는지 확인합니다.

react.js를 처음 사용하는데, 옵션 속성이 전달된 재사용 가능한 컴포넌트를 작성하려고 합니다.컴포넌트에서는 옵션 속성이 meteo를 사용하여 DB에서 데이터를 풀하고 반환된 오브젝트에 속성이 있는지 확인하고(parent_task가 task에 존재하는지), 존재하는 경우 링크를 추가합니다.이것은 매우 간단한 것처럼 보이지만, 계속 오류가 발생합니다.제가 놓치고 있는 것에 대해 제안해 주실 분 있나요?제가 놓친 jsx gotcha가 있나요?

<Header task={params.task_id} />  // rendering component with property

// Task List Header
Header = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    var handle = Meteor.subscribe('tasks');

    return {
      taskLoading: ! handle.ready(),
      task: Tasks.findOne({_id: this.props.task})
    }
  },

  getParentTaskLink() {
    if (!this.data.taskLoading) {
      var current_task = this.data.task;

      if (parent_task in current_task) {  // or current_task.hasOwnProperty(parent_task)
        console.log("parent_task exists!");
      }
    }
  },

  render() {
    return (
      <div className="bar bar-header bar-calm">
        {this.getParentTaskLink()} // eventually return anchor element here
        <h1 className="title">Hello World</h1>
      </div>
    )
  }
});

문제의 소품은 무엇입니까?어때.

{this.props.propInQuestion ? <a href="#">link</a> : null}

내가 알아냈어구문 문제였던 것 같습니다. 객체의 속성을 검색할 때 문자열을 사용해야 합니다.다음 행이 동작합니다.

if ('parent_task' in current_task)

내 작업:

if ('myProperty' in this.props) {}

또는

if (this.props.myProperty !== undefined) {}

또는

if (this.props.hasOwnProperty('myProperty')) {}

0 값은 동작하지 않기 때문에 number 속성에는 다음 조건이 적용되지 않습니다(예: 빈 문자열).

if (this.props.MaxValue) {}

React.js를 사용하여 속성이 있는지 확인합니다.

사용할 수 있는 옵션은 두 가지가 있습니다.& & 연산자와 If 스테이트먼트를 사용하여 소품이 존재하는지 확인합니다.옵션 1은 속성이 존재하는지 확인한 후 코드의 두 번째 부분을 실행합니다.if 없이 if처럼 작동합니다.

옵션 1

this.props.property && this.props.property

옵션 2

if(this.props.property){
this.props.property
}

이 기능은 함수 이름에서도 사용할 수 있습니다.

이 체크박스를 사용하여 컴포넌트 및 태그를 렌더링할 수도 있습니다.

난 이거면 돼

if(this.props.test === undefined){
    console.log('props.test is not defined')
}

컴포넌트의 콜백 속성을 확인하기 위해 다음과 같은 우아한 솔루션을 사용해 보는 것이 좋습니다.

if(typeof this.props.onClickCallback === 'function') { 
// Do stuff; 
}

또는 파괴를 적용합니다.

const { onClickCallback } = this.props;
if(typeof onClickCallback === 'function') { 
// Do stuff; 
}

가장 많이 투표된 답변

props.propInQuestion ? 'a' : 'b'

소품이 부울이고 존재 여부를 확인하려는 경우 작동하지 않습니다.

JavaScript에서 객체에 키가 있는지 확인하는 방법가장 빠른 방법은props.hasOwnProperty('propInQuestion')단, 이 경우 프로토타입 체인이 검색되지 않는다는 점에 주의해 주십시오.

기능 컴포넌트에서는 이렇게 사용할 수 있습니다.

if(props.myProperty){
  //do something
}else{
  //do something
}

if(props.hasOwnProperty('propertyName')){
  //do something
} else {
  //do something else
}

필요한 링크를 사용하여 getParentTaskLink()에서 돌아와야 합니다.

 if (current_task.parent_task) {
      return (<a href="#">link</a>);
    } else { return null; }

언급URL : https://stackoverflow.com/questions/33761439/check-if-property-exists-using-react-js