在 react.js 中，ng-if 等价于什么？

我来从使用棱角反应，我试图找出一个好的反应替代棱角的 ng-if 指令，我渲染或不渲染一个元素的条件。以这段代码为例。顺便说一下，我使用的是打字稿(tsx) ，不过这应该没什么关系。

"use strict";


import * as React from 'react';


interface MyProps {showMe: Boolean}
interface MyState {}


class Button extends React.Component <MyProps, MyState>{
constructor(props){
super(props);
this.state = {};
}


render(){
let button;
if (this.props.showMe === true){
button = (
<button type="submit" className="btn nav-btn-red">SIGN UP</button>
)
} else {
button = null;
}
return button;


}
}
export default Button;

这个解决方案是有效的，但是有没有其他的方法可以达到这个效果呢? 我只是在猜测

96888 次浏览
小开
最佳答案

How about 三元运算符三元运算符?

render() {
return (
this.props.showMe ? <button type="submit" className="btn nav-btn-red">SIGN UP</button> : null
);
}

你也可以使用 &&:

render() {
return (
this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>
);
}

注释中的大块可以很容易地通过将 JSX 包装在 ()中来处理:

render() {
return this.props.showMe && (
<div className="container">
<button type="submit" className="btn nav-btn-red">
SIGN UP
</button>
</div>
);
}

内嵌:

render() {
return (
<div className="container">
{this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>}
</div>
);
}
小开

好一点:

render() {
return (
this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>
);
}
小开

我离开这里的历史目的，请看到我的编辑后，一个更好的解决方案已经开发了一段时间的反应 我最终创建了一个 NgIf 组件(这是一个本地的 response，但可能适用于 response)

密码:

import React, {Component} from "react";


class NgIf extends Component {
render() {
if (this.props.show) {
return (
this.props.children
);
} else {
return null
}
}
}


export default NgIf;

用法:

...
import NgIf from "./path/to/component"
...


class MyClass {
render(){
<NgIf show={this.props.show}><Text>This Gets Displayed</Text></NgIf>
}
}

我对此是新的，所以可能会得到改进，但有助于我从角度的转变

剪辑

一旦我有了更多的经验，请参阅下面的编辑以获得更好的解释

感谢下面 Jay 的评论，一个伟大的想法也是:

render() {
<View>{this.props.value ? <Text>Yes</Text> : <Text>No</Text>}</View>
}

或者

render() {
<View>{this.props.value && <Text>Yes</Text>}</View>
}

与其他一些答案类似，但是可以内联使用，而不是使用整个呈现块/函数，不需要特殊的组件，并且可以使用带有三元运算符的 else 语句。另外，如果父对象不存在，if 语句中包含的项不会抛出错误。也就是说，如果 props.value不存在，那么 props.value.value2就不会抛出错误。

看看这个答案 < a href = “ https://stackoverflow./a/26152067”> https://stackoverflow.com/a/26152067

编辑2:

根据上面的链接(https://stackoverflow.com/a/26152067)和经验丰富的反应应用程序开发后，以上的方式它不是最好的方式做事情。

条件操作符的反应实际上非常容易理解，有两种方法可以做到:

//Show if someItem
{someItem && displayThis}


//Show if else
{someItem ? displayThisIfTrue : displayThisIfFalse}

您可能会碰到的一个警告是，如果“ some Item”不是布尔表达式。如果它是说0反应将打印一个0或反应本机将给你一个错误，需要在一个文本元素中包装“0”。这通常对于假测试来说不是问题，但是对于真实测试来说就是问题了。例如:

{!someItem && displayThis} //Will work just fine if item is 0 or null or "" etc
{someItem && displayThis} //Will print the value of someItem if its not falsy

我常用的把戏? 双重否定。

{!!someItem && displayThis}

注意，这不适用于三元运算符 (myVar? true: false)，因为它隐式地将结果转换为布尔表达式。

小开

我可以想到至少三种不同的方法来模拟 React 中的 ng-if 功能

  • 如果
  • 开关
  • 生活(立即调用函数表达式)

你可以在这里阅读文章: 反应分量中角的 n- 若果当量

基本上，你可以这样做:

var IfDemoComponent = React.createClass({
render: function() {
var el = null;
if (this.props.showMe) {
el = (
<div>
I am only included in the DOM if this.props.showMe evaluates to true.
</div>
);
}
return el;
}
});
小开

如果你还有其他的元素，你可以像这样包装条件:

render() {
return (
<div>Stuff</div>
{this.props.showMe && (
<button type="submit" className="btn nav-btn-red">SIGN UP</button>
)}
<div>More stuff</div>
);
}
小开

false、 null、 undefined和 true是有效的儿童，它们根本不是 这些 JSX 表达式都将呈现为相同的内容:

你可以试试这个

const conditional=({condition,someArray})=>{
return(
<div>
{condition && <Header /> // condition being boolean}
{someArray.length>0 && <Content />}
</div>
)
}

这对于有条件地呈现 React 元素非常有用 and will render only if someArray.length>0

小开

I do not like having many ternary operators in the code. That's why I made a library with a couple of useful components. "RcIf"

  <RcIf if={condition} >
<h1>I no longer miss ngif</h1>
</RcIf>
<RcIf if={othercondition} >
<h1>I no longer miss v-if</h1>
<RcElse>
<h1>I love react</h1>
</RcElse>
</RcIf>

您可以从 npm 安装它

https://www.npmjs.com/package/rc-if

小开

我只是想补充的是，*ngIf的角度不实例化的组件，它是附加到。在 React 中，如果在 return语句中使用了 if 语句，那么即使组件没有显示，它仍然会实例化该组件。要在 React 中实现真正的 *ngIf类型行为，您必须创建一个变量，该变量保存 return语句之外的条件组件:

render() {


const show = false


return show
? <AwesomeComponent />   //still instantiated
: null
}


render() {


let c = null
const show = false


if (show) {
c = <AwesomeComponent />   //not instantiated
}
return c
}
小开

我来自一个有角度的背景，也是寻找一个简单的一行，以显示标签，如果变量有任何元素。这对我很有效:

<div className="comic_creators">
{c.creators.available > 0 ? <h4>Creators</h4> : null }
{c.creators.items.map((creator,key) =>
<Creator creator={creator} key={key}></Creator>
)}
</div>
小开

我是 Tersus-jsx. 宏的创建者，我认为这个模块正好提供了这个问题所需要的内容。

与将 JSX 表达式和 ES6混合以实现 ng-if 或 ng-repeat 不同，这个宏允许使用与 AngularJS for React JSX 中相同的方法，例如对 ng-if:

<div>
<button
tj-if={a === 0}
id="gotoA"
className="link"
onClick={clicking}
/>
</div>

相当于

<div>
{(a === 0) && (
<button
id="gotoA"
className="link"
onClick={clicking}
/>
)}
</div>

Given that the latest version of create-react-app support Babel-Macro out of the box, all you need to do is npm install this module, wrap the render return with "tersus" and start assigning those props.

您可以从以下位置安装: Https://www.npmjs.com/package/tersus-jsx.macro

小开

我只是创建了一个方法，以表达式和另外两个参数作为模板，以防表达式 true 和另外一个是选项 else 模板

export function rif(exp, template, elseTemplate = null) {
if (exp) {
return template;
} else {
return elseTemplate;
}
}

我就这么用

import { rif } from '../utilities';


...
render() {
return (
<main role="main" className="container">


{rif(
this.movies.length > 0,
<p>Showing {this.movies.length} movies. </p>,
<p>There are no movies..</p>
)}
</main>
);
}
小开

就我个人而言，我喜欢使用 getter，它干净而且确保反应性:

get toBeDisplayed(){
const { someLogicState } = this.state;
if(someLogicState)
return (
<div>
Hi, world !
</div>
);
else
return null;
}


render(){
return (<div>{this.toBeDisplayed}</div>);
}
小开

我工作的角度和反应。我认为 angular很好地管理逻辑条件通过不同的指令。

在 reactjs中，这种方法的工作方式不同。

您可以使用 if else条件作为 render function或 ternary operator的 return。

如果还有别的

  render(){
    

const auth = true;
    

if(!auth)
return(
<div className="ps-checkout__login">
<div className="d-flex flex-row">
<div className="p-2"><img src="../../../static/img/return-customer.png"></img>
Returning Customer?</div>
<div className="p-2">
<Link href="/account/login">
<a>
Click here to login
</a>
</Link>
</div>
</div>
</div>
)
else return null;
}

三元算符

{ auth?
(<div className="ps-checkout__login">
<div className="d-flex flex-row">
<div className="p-2"><img src="../../../static/img/return-customer.png"></img>
Returning Customer?</div>
<div className="p-2">
<Link href="/account/login">
<a>
Click here to login
</a>
</Link>
</div>
</div>
</div>):null }
小开

From React Documentation

Https://reactjs.org/docs/conditional-rendering.html

function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}


const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);

提交答案