我正在学习reactJs并尝试将属性传递给组件。
代码如下 -
import React from 'react';
import ReactDOM from 'react-dom';
class myComponent extends React.Component {
render() {
if (this.props.signedIn == false) {
return <h1>Hi</h1>;
}
return <h1>Hello!</h1>;
}
}
ReactDOM.render(
<myComponent signedIn={false} />,
document.getElementById('app')
);
这样可行,但请注意我必须注入false的部分,因为javascript用大括号括起来。
我怀疑JSX是不是将'false'字符串识别为普通JS中的虚假值?
询问的理由─ 与角度中的ng-show =“false”进行比较,隐藏元素,但正如评论中所讨论的那样,可能是因为ng-show指令手动将'false'评估为伪值。
答案 0 :(得分:5)
不要忘记修复组件名称it should start with uppercase letters。
<小时/> 这些条件与
JSX
无关,正如其他评论和答案中所述。这就是JavaScript的工作原理。
请注意,重要的是要记住:
永远不要对布尔值做双等于(==
)a.k.a "Abstract Equality",这就是要求错误。
因为引擎仅对布尔值执行类型强制,这可能会导致意外行为。
例如,
if(2 == true) //returns false
和
if(2 == false) // returns false
来自spec:
如果Type(x)是布尔值,则返回比较结果! ToNumber(x)== y。
如果Type(y)是布尔值,则返回结果 比较x ==! ToNumber(Y)。
相反,您可以进行隐式检查:
if (this.props.signedIn)
或明确检查,但使用三等于a.k.a "strict equality"
if (this.props.signedIn === false)
<小时/> 关于
react
部分:再次,它基本上只是JavaScript函数和对象。prop
时,它将是undefined
:
this.props.signedIn // signedIn will be undefined if we didn't pass it as a prop
所以,如上所述的隐式检查:
if (this.props.signedIn)
工作得很好。
<小时/> 在没有传递prop的情况下运行示例:
class MyComponent extends React.Component {
render() {
if (this.props.signedIn) {
return <h1>Hi</h1>;
}
return <h1>not signed on!</h1>;
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
传入false
传递的示例:
class MyComponent extends React.Component {
render() {
if (this.props.signedIn) {
return <h1>Hi</h1>;
}
return <h1>not signed on!</h1>;
}
}
ReactDOM.render(
<MyComponent signedIn={false}/>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
传入true
传递的示例:
class MyComponent extends React.Component {
render() {
if (this.props.signedIn) {
return <h1>Hi</h1>;
}
return <h1>not signed on!</h1>;
}
}
ReactDOM.render(
<MyComponent signedIn={true}/>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
答案 1 :(得分:1)
没有Javascript不会将falsy string
与false
进行比较,如果您希望这样做,您可以通过检查if条件并且不提供falsy boolean值作为道具来完成。
class MyComponent extends React.Component {
render() {
if (this.props.signedIn) {
return <h1>Hi</h1>;
}
return <h1>Hello!</h1>;
}
}
render(
<MyComponent />,
document.getElementById('root')
);
和一个真实的案例
render(
<MyComponent signedIn/>,
document.getElementById('root')
);
答案 2 :(得分:0)
所有false
,0
,空字符串''
和""
,NaN
,undefined
和null
始终评价为假;其他一切都是真的。
除了模板系统之外,JSX本身不提供任何东西。所以它基于javascript而不是JSX。
所以在你的例子中你可以删除== false
,javascript将为你评估所有这些模式。
顺便说一下,您可以在此链接中查看ng-hide源以了解更多信息
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js
并了解有关运营商here
的更多信息