logo标签列表

JSX 中的 if-else 语句：ReactJS

javascriptreactjsreact-native
139
我需要更改渲染函数并在给定特定状态时运行一些子渲染函数。
例如：
render() {
    return (   
        <View style={styles.container}>
            if (this.state == 'news'){
                return (
                    <Text>data</Text>
                )
            }
        </View>
    )
}

我如何在不改变场景的情况下实现这一点，我将使用选项卡来动态更改内容。

17个回答
235
根据文档：

if-else语句不能在JSX内部工作。这是因为JSX只是函数调用和对象构造的语法糖。

基本规则：

JSX从本质上讲是语法糖。编译后，JSX表达式将变成常规的JavaScript函数调用，并计算为JavaScript对象。我们可以通过使用花括号括起来来嵌入任何JavaScript表达式。

但是只能使用表达式而非语句，也就是说，我们无法直接在JSX中放置任何语句（如if-else/switch/for等）。

如果您想有条件地渲染元素，则可以使用三元运算符，例如：ternary operator。
render() {
    return (   
        <View style={styles.container}>
            {this.state.value == 'news'? <Text>data</Text>: null }
        </View>
    )
}

另一种选择是，在jsx中调用一个函数，并将所有的if-else逻辑放在其中，像这样：
renderElement(){
   if(this.state.value == 'news')
      return <Text>data</Text>;
   return null;
}

render() {
    return (   
        <View style={styles.container}>
            { this.renderElement() }
        </View>
    )
}
<Text style={styles.instructions}> { 如果(this.state.page == 'sohbet'){ } 不可能？} </Text> - user8026867
在文档中已经很好地解释了这一点，可以查看以下原因：http://reactjs.cn/react/tips/if-else-in-JSX.html - Mayank Shukla
它之前是可以工作的，不知道出了什么问题。原因是：{...} 的内容必须是一个表达式，if-else/for/switch 是语句。你可以这样做，调用一个函数并将 if/else 放在其中，我会更新答案 :) - Mayank Shukla
该函数返回以下内容，但它没有显示任何东西，这是有问题的。我需要从该函数返回JSX代码。 - user8026867
res.text() 是什么？如果 test 是一个函数的名称，那么你需要使用 this.text() 来调用它，而不是使用 res。你能展示完整的代码吗？这样更容易帮助你。请检查更新后的答案，了解如何调用该函数。 - Mayank Shukla
显示剩余9条评论
66

通过使用立即调用的函数表达式（IIFE），您可以实现您想要的效果。

render() {
    return (   
        <View style={styles.container}>
            {(() => {
              if (this.state == 'news'){
                  return (
                      <Text>data</Text>
                  )
              }
              
              return null;
            })()}
        </View>
    )
}

这里是工作示例：

编辑 awesome-yalow-eb2nu

但是，在你的情况下，你可以坚持使用三元运算符。

@Yusufbek，你能帮我看看为什么这段代码不起作用吗？"if (this.state == 'news'){ return (<div><Text> data1</Text> <Text>data2</Text></siv> ) }" - Aakash Mathur
在上面的代码中，我们使用 div 元素来包含多个文本元素。 - Aakash Mathur
@AakashMathur 应该可以工作。确保您仅返回1个根元素，并且您有else语句以返回null。 - Yusufbek
3
通过切换到Vue，您可以实现更直观的解决方案。让我感到困惑的是，对于如此基础的事情，必须进行这样的黑客攻击。 - GHOST-34
40

我觉得这种方式是最好的：

{this.state.yourVariable === 'news' && <Text>{data}<Text/>}
4
同意，这是其中最好的一个。使用三元运算符返回null是不必要的 ;) - MMachinegun
这应该添加到主要答案中。 - Fatih Aktaş
我该如何在我的情况下使用它？如果我像这样使用它{localStorage.getItem('token') && <Typography>Invalid Login</Typography>}，它将在表单提交之前就被渲染出来了。 https://stackoverflow.com/questions/60577971/conditional-rendering-inside-a-function - user12541823
这在我的情况下对我有所帮助，但是我不得不用<>...</>来包装元素。 - Strabek
这个方法很好用，如果你不需要 ternary 语法提供的 false-case outcome 的话。 - Ozone
14

我确实喜欢这样做，而且它运行得很好。

constructor() {
   super();

   this.state ={
     status:true
   }
}

render() {
   return( 

     { this.state.status === true ?
           <TouchableHighlight onPress={()=>this.hideView()}>
             <View style={styles.optionView}>
               <Text>Ok Fine :)</Text>
             </View>
          </TouchableHighlight>
           :
           <Text>Ok Fine.</Text>
     }
  );
}

hideView(){
  this.setState({
    home:!this.state.status
  });
}
1
@Pierre.Vriens 在 render() 方法中，你可以使用三元运算符来代替 if-else。语法：条件 ? 表达式1 : 表达式2 例如：if (this.state.status === true) { } else { } - Manish Ahire
3

有一个Babel插件可以让你在JSX内写条件语句而无需使用JavaScript转义或编写包装类。它被称为JSX Control Statements：

<View style={styles.container}>
  <If condition={ this.state == 'news' }>
    <Text>data</Text>
  </If>
</View>

根据您的Babel配置，需要进行一些设置，但是无需导入任何东西，它具有条件渲染的所有优点，而不会离开JSX，这使您的代码看起来非常干净。

3

如果你想在函数式组件中使用条件语句，你可以在JSX中调用一个函数，并把所有的条件逻辑放在函数里。

conditionalRender(){
   if(state === 'news') {
      return <Text>data</Text>;
   }
   else(state !== 'news') {
      return <Text>Static Value</Text>;
   }
}

render() {
    return (   
        <View style={styles.container}>
            { conditionalRender() }
        </View>
    )
}
3

您可以做到这一点。只需在您的JSX组件之前不要忘记加上“return”即可。

示例：

render() {
    if(this.state.page === 'news') {
        return <Text>This is news page</Text>;
    } else {
        return <Text>This is another page</Text>;
    }
}

从互联网获取数据的示例：

import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';

export default class Test extends Component {
    constructor(props) {
        super(props);

        this.state = {
            bodyText: ''
        }
    }

    fetchData() {
        fetch('https://example.com').then((resp) => {
            this.setState({
                bodyText: resp._bodyText
            });
        });
    }

    componentDidMount() {
        this.fetchData();
    }

    render() {
        return <View style={{ flex: 1 }}>
            <Text>{this.state.bodyText}</Text>
        </View>
    }
}
你能给我展示一个完整的工作示例吗？抱歉，我是新手。 - user8026867
@user8026867 添加了示例 - Jagjot
我想从函数内部返回。 - user8026867
@user8026867，你可以编写一个函数并在其中返回 JSX 组件。尝试一下，如果无法实现，我可以为你提供一个示例。 - Jagjot
{ 如果(this.state.page == 'haberler') { this.pulldata(); return <Text>{this.state.bodyTexts}</Text>; } else { return null; } } - user8026867
显示剩余2条评论
2
 <Card style={
  { backgroundColor: '#ffffff', 
    height: 150, width: 250, paddingTop: 10 }}>
                                
<Text style={styles.title}> 
 {item.lastName}, {item.firstName} ({item.title})
</Text> 
<Text > Email: {item.email}</Text>
 {item.lastLoginTime != null ? 
   <Text >  Last Login: {item.lastLoginTime}</Text> 
   : <Text >  Last Login: None</Text>
 }
 {
   item.lastLoginTime != null ? <Text >  
   Status: Active</Text> : <Text > Status: Inactive</Text>
 }                              
</Card>
2

在JSX中不需要使用if else条件语句。它提供了类似三目运算符的函数来帮助您实现这一点，例如：

state={loading:false}
<View>
  {loading ? <Text>This is a test For if else condition</Text> : <ActivityIndicator/>
</View>
2

使用switch case代替if-else如何？

  render() {
    switch (this.state.route) {
      case 'loginRoute':
        return (
            <Login changeRoute={this.changeRoute}
              changeName={this.changeName}
              changeRole={this.changeRole} />
        );
      case 'adminRoute':
        return (
            <DashboardAdmin
              role={this.state.role}
              name={this.state.name}
              changeRoute={this.changeRoute}
            />
        );
      default: 
        return <></>;
    }
1
你缺少一个默认的返回值，它应该是除了 undefined 之外的其他东西。 - Emile Bergeron
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接