Проверьте, существует ли свойство, используя React.js

Я новичок в использовании react.js и пытаюсь написать повторно используемый компонент, которому передано необязательное свойство. В компоненте это необязательное свойство извлекает данные из базы данных с помощью метеора, затем я хочу проверить, существует ли свойство в возвращаемом объекте (parent_task существует в задаче), и если существует, добавляет ссылку. Это кажется довольно простым, но я продолжаю получать ошибки. Есть ли у кого-нибудь предложения о том, что я могу упустить? Есть ли ошибка jsx, которую мне не хватает?

<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>
    )
  }
});

reactjs javascript meteor-react
person bgmaster    schedule 17.11.2015    source источник
comment
Где у вас проблема? В getParentTaskLink?   -  person Dominic    schedule 17.11.2015
comment
Не совсем, с чего бы data.task быть пустым внутри data.taskLoading фальшивого чека? Если бы это было так, почему бы вам просто не сделать if (!this.data.taskLoading && this.data.task) { и тогда вы знаете, что можете использовать его внутри?   -  person Dominic    schedule 17.11.2015

Ответы (6)


arrow_upward
43
arrow_downward

о какой опоре идет речь? как насчет

{this.props.propInQuestion ? <a href="#">link</a> : null}
person meta-meta    schedule 17.11.2015
comment
Я хочу узнать, существует ли свойство parent_task в возвращаемом объекте данных (задаче). Я отредактировал вопрос, чтобы сделать его более понятным. Я попробовал ваше предложение, но оно продолжает выдавать мне ошибку. - person bgmaster; 17.11.2015
comment
@meta-meta не проще ли написать {this.props.propInQuestion && <a href="#">link</a>}? - person Jay Wick; 17.10.2017
comment
Либо или. Некоторых разработчиков смущает охранник &&. Я мог пойти в любом случае. - person meta-meta; 18.10.2017
comment
Я должен указать, что при использовании этого {this.props.propInQuestion && <a href="#">link</a>} убедитесь, что this.props.propInQuestion является логическим или принуждает его к единице. Если this.props.propInQuestion равно 0, будет отображаться 0. - person meta-meta; 28.09.2018
comment
Если this.props.propInQuestion является текущим параметром и является логическим значением, то вы получите сообщение об ошибке, когда оно будет иметь ложное значение. Я использовал this.props.propInQuestion != null и получил желаемый результат. @meta-meta Я не уверен, что ты хотел сказать то же самое - person Victor; 02.07.2020
comment
@ Виктор, в чем ошибка? {this.props.propInQuestion && <a href="#">link</a>} будет оцениваться как false, если this.props.propInQuestion === false. React не будет отображать это. - person meta-meta; 17.07.2020

arrow_upward
11
arrow_downward

Я понял это. По-видимому, это была проблема с синтаксисом — вам нужно использовать строку при поиске свойств в объектах. Строка ниже работает:

if ('parent_task' in current_task)
person bgmaster    schedule 17.11.2015

arrow_upward
5
arrow_downward

Проверьте, существует ли свойство, используя React.js

Есть два варианта, которые вы можете использовать. оператор && и оператор If, чтобы проверить, существуют ли реквизиты. Вариант 1 проверит, существует ли свойство, а затем запустит вторую часть кода. Это работает как если без если.

Опция 1

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

Вариант 2

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

Это также работает с именами функций.

Вы также можете использовать эту проверку для рендеринга компонентов и тегов.

person JayJay Barnard    schedule 02.08.2019
comment
Пожалуйста, уточните свой ответ, чтобы помочь другим прийти к этому вопросу. - person lprakashv; 02.08.2019
comment
Если ожидаемое значение является логическим, то оно не будет работать должным образом, если оно имеет ложное значение. - person Victor; 02.07.2020

arrow_upward
2
arrow_downward

Это работает для меня

if(this.props.test === undefined){
    console.log('props.test is not defined')
}
person Muhammad Owais    schedule 09.04.2020

arrow_upward
0
arrow_downward

Я предлагаю попробовать это элегантное решение для проверки свойства обратного вызова в вашем компоненте:

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

или применяя деструктурирование:

const { onClickCallback } = this.props;
if(typeof onClickCallback === 'function') { 
// Do stuff; 
}
person Andrea - codemillers.com    schedule 02.08.2019

arrow_upward
-1
arrow_downward

Вам нужно вернуться из getParentTaskLink() с нужной вам ссылкой.

 if (current_task.parent_task) {
      return (<a href="#">link</a>);
    } else { return null; }
person Bruce    schedule 17.11.2015
comment
Извините, я просто оставил там console.log для отладки. Ошибка говорит о том, что parent_task не определен. - person bgmaster; 17.11.2015
comment
Вы пытались просто проверить if(current_task[parent_task]), это должно дать вам значение свойства parent_task в current_task. - person Bruce; 17.11.2015
comment
Кажется, это дает мне ту же ошибку. Я знаю, что в некоторых случаях он не будет определен, поэтому я хочу проверить. У меня никогда не было этой проблемы с JavaScript в других приложениях, что заставляет меня думать, что это проблема JSX. - person bgmaster; 17.11.2015
comment
Он говорит, что parent_task не определен (потому что это не так), но именно поэтому я хочу проверить. - person bgmaster; 17.11.2015
comment
Упс, извините, вы правы. Я должен был ввести if(current_task.parent_task). Использование [parent_task] действительно заставляет думать, что parent_task — это переменная, а не атрибут. Я отредактировал свой первоначальный ответ, чтобы отразить это. - person Bruce; 17.11.2015
comment
У меня еще недостаточно представителей, чтобы прокомментировать ваш ответ наверху bgmaster, но просто для вашего сведения: то, как вы пытаетесь это сделать, намного медленнее, чем то, что я указал. Ваш метод включает в себя цикл через current_task, чтобы найти свойство «parent_task», а мой - нет. Он просто возвращает current_task.parent_task, даже если он не определен. Гораздо быстрее сделать так, как я написал в своем ответе. Вы можете увидеть это здесь: stackoverflow.com/questions/5917008/ - person Bruce; 17.11.2015
comment
Проблема с этим решением заключается в том, что если свойство существует, но является ложным (например, [] или или 0), оно вернет значение null. - person Cruncher; 17.02.2016