Javascript 使用 React.js 检查属性是否存在
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33761439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if property exists using React.js
提问by bgmaster
I'm new to using react.js, and am trying to write a re-usable component that has an optional property passed to it. In the component, that optional property pulls data from a db using meteor, then I want to check if a property exists on the returned object (parent_task exists on task), and if exists, adds a link. This seems fairly simple, but I keep getting errors. Does anyone have any suggestions on what I might be missing? Is there a jsx gotcha that I'm missing?
我是使用 react.js 的新手，并且正在尝试编写一个可重用的组件，该组件具有传递给它的可选属性。在组件中，该可选属性使用meteor 从数据库中提取数据，然后我想检查返回的对象上是否存在属性（任务上存在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>
)
}
});
回答by meta-meta
what is the prop in question? how about
有问题的道具是什么？怎么样
{this.props.propInQuestion ? <a href="#">link</a> : null}
回答by bgmaster
I figured this out. Apparently it was a syntax issue - you need to use a string when searching for properties in objects. The line below works:
我想通了。显然这是一个语法问题 - 在对象中搜索属性时需要使用字符串。下面的行有效：
if ('parent_task' in current_task)
回答by JayJay Barnard
Check if a property exists using React.js
使用 React.js 检查属性是否存在
There are two options you can use. the && operator and If statement to check if the props exist. Option 1 will check if the property exists then run the second part of the code. It works like an if without the if.
您可以使用两个选项。&& 运算符和 If 语句来检查道具是否存在。选项 1 将检查该属性是否存在，然后运行代码的第二部分。它就像没有 if 的 if 一样。
Option 1
选项1
this.props.property && this.props.property
Option 2
选项 2
if(this.props.property){
this.props.property
}
This also works with function names.
这也适用于函数名称。
You can use this also check to render components and tags.
您也可以使用此检查来呈现组件和标签。
回答by Andrea - codemillers.com
I suggest to try this elegant solution to check callback property on your component:
我建议试试这个优雅的解决方案来检查你的组件的回调属性：
if(typeof this.props.onClickCallback === 'function') {
// Do stuff;
}
or applying destructuring:
或应用解构：
const { onClickCallback } = this.props;
if(typeof onClickCallback === 'function') {
// Do stuff;
}
回答by Muhammad Owais
This works for me
这对我有用
if(this.props.test === undefined){
consoel.log('props.test is not exist')
}
回答by Bruce
You need to return out of getParentTaskLink() with the link you need.
您需要使用所需的链接从 getParentTaskLink() 返回。
if (current_task.parent_task) {
return (<a href="#">link</a>);
} else { return null; }
