使用 React.js 检查属性是否存在

Question

我是使用 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>
    )
  }
});

Answer 1

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

Answer 2

在功能组件中，可以这样使用。

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

Answer 3

投票最多的答案

props.propInQuestion ? 'a' : 'b'

如果 prop 是布尔值并且您正在尝试检查 是否存在，则不起作用。

基于How do I check if an object has a key in JavaScript?，最快的方法是props.hasOwnProperty('propInQuestion')，但需要注意的是这不会搜索原型链。

Answer 4

对我有用：

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

或

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

或

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

下一个条件不适用于数字属性，因为 0 值不起作用（例如空字符串）：

if (this.props.MaxValue) {}

Answer 5

这对我有用

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

Answer 6

使用 React.js 检查属性是否存在

您可以使用两个选项。 && 运算符和 If 语句来检查道具是否存在。 选项 1 将检查属性是否存在，然后运行代码的第二部分。它就像没有 if 的 if 一样工作。

选项 1

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

选项 2

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

这也适用于函数名。

你也可以使用这个检查来渲染组件和标签。

Answer 7

我建议尝试这个优雅的解决方案来检查组件的回调属性：

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

或应用解构：

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

Answer 8

您需要从 getParentTaskLink() 中返回您需要的链接。

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

Answer 9

我想通了。显然这是一个语法问题——在对象中搜索属性时需要使用字符串。以下行有效：

if ('parent_task' in current_task)

Answer 10

有问题的道具是什么？怎么样

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