41

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

10 回答 10

45

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

{this.props.propInQuestion ? <a href="#">link</a> : null}
于 2015-11-17T16:01:38.333 回答
13

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

if ('parent_task' in current_task)
于 2015-11-17T16:42:06.237 回答
5

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

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

选项1

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

选项 2

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

这也适用于函数名称。

您也可以使用此检查来呈现组件和标签。

于 2019-08-02T15:34:48.253 回答
4

这对我有用

if(this.props.test === undefined){
    console.log('props.test is not defined')
}
于 2020-04-09T21:49:31.003 回答
1

对我来说工作：

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

或者

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

或者

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

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

if (this.props.MaxValue) {}
于 2021-10-28T14:19:15.010 回答
0

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

if(props.myProperty){
  //do something
}else{
  //do something
}
于 2021-12-04T11:19:20.013 回答
0

投票最多的答案

props.propInQuestion ? 'a' : 'b'

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

基于如何检查对象是否在 JavaScript 中具有键？最快的方法是props.hasOwnProperty('propInQuestion')，需要注意的是这不会搜索原型链。

于 2021-11-18T22:20:32.337 回答
0

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

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

或应用解构：

const { onClickCallback } = this.props;
if(typeof onClickCallback === 'function') { 
// Do stuff; 
}
于 2019-08-02T16:21:52.123 回答
0 
if(props.hasOwnProperty('propertyName')){
  //do something
} else {
  //do something else
}
于 2021-12-10T08:35:00.373 回答
-2

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

 if (current_task.parent_task) {
      return (<a href="#">link</a>);
    } else { return null; }
于 2015-11-17T16:09:25.843 回答