背景

Question

我想在渲染方法的回归中使用if语句，我的意思是这样的：

export default class App extends Component 
{

   render()
   {
        return(
             <View>
               if(this.state.error)
               {
                 <View>
                       <Image source={{"error"}} />
                       <Text>An Error Happen</Text>
                   </View>
               }
               else
               {
                   <View>
                       <List dataArray={this.state.items}></List>
                   </View>
                }
              </View>
        );
   }

}

我可以使用三元运算符，但我想要的是尽可能使用if语句

Answer 1

这很简单：

render()
   {
        return(
             <View>
               {this.state.error ?
                 (<View>
                       <Image source={{"error"}} />
                       <Text>An Error Happen</Text>
                 </View>)
               :
                 (<View>
                       <List dataArray={this.state.items}></List>
                 </View>)
                }
              </View>
        );
   }

也许可以帮到你:)。

Answer 2

背景

语句和表达式有什么区别

请参阅：What is the difference between an expression and a statement?

特定于JavaScript：

What is the difference between an expression and a statement in JS?

JavaScript: declarations vs expressions vs statements

return需要一个表达式作为参数。如果 statement 不是表达式（这是有意义的，因为statement是名称）。

JSX的实现细节（用<Tags>填充，但使用javascript也同样重要）。 JSX被编译为普通JavaScript。

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

编译为

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

documentation。

如果要在JSX中评估JavaScript表达式，则需要将其用花括号括起来。

const myButtonColor = 'blue'
...
<MyButton color={myButtonColor} shadowSize={2}>
  Click Me
</MyButton>

返回问题

完成类似if的功能的方式：

内联逻辑和（&&）
三元运算符
返回是否阻止

让我们看一些示例：

内联逻辑与

render() {
  return (
    <View>
      {this.state.error && <Text> There's an error! </Text>}
    </View>
  )
}

此方法最简单，建议您先尝试一下。当条件评估为false时，您不想执行任何操作时，这很有意义。与其他语言相比，&&的行为different in javascript有点。当this.state.error的计算结果为false时，render返回this.state.error，如果this.state.error恰好是空字符串或0，则呈现unintended consequences。

三元运算符

render() {
  return (
    <View>
      {this.state.error ? <Text>Error!</Text> : <Text>No Error!</Text>
    </View>
  )
}

最大的问题是行长很快。您可以使用括号来解决这个问题。

render() {
  return (
    <View>
      {this.state.error ? (
        <Text>Long, detailed error message</Text>
      ) : (
        <Text>No Error!</Text>
      )}
    </View>
  )
}

您也可以使用此方法返回之前声明的JavaScript字符串。

返回是否阻止

render() {
  if(this.state.error) {
    return (<Text>Long, detailed error message</Text>)
  }
  else {
    return (<Text>No Error!</Text>)
   }
 }

此方法的问题是，如果您有一个长的render方法和一个小的条件更改，则必须在每个if块中几乎重复执行render函数。我通常将此方法作为一种手段。

Answer 3

你可以这样做：

 render()
   {
        return(
             <View>
               {this.state.error && 
                 <View>
                       <Image source={{"error"}} />
                       <Text>An Error Happen</Text>
                   </View>
               }
               {!this.state.error &&
                   <View>
                       <List dataArray={this.state.items}></List>
                   </View>
                }
              </View>
        );
   }

Answer 4

你应该尝试这样的事情：

export default class App extends Component {
render() {
  if(this.state.error)
  {
    return (
     <View>
       <Image source={{"error"}} />
       <Text>An Error Happen</Text>
     </View>
     )
  }
  else {
    return (
      <View>
        <List dataArray={this.state.items}></List>
      </View>
     );
   }
  }
}

Answer 5

我建议在这种情况下利用js：

{ this.state.error &&
   <View>
    <Text>show error</Text>
   </View>
}
{ !this.state.error &&
   <View>
    <Text>all good</Text>
   </View>
}

在某些情况下，它看起来比三元更好。

if语句在render方法中 - 本机反应

5 个答案:

背景

返回问题

内联逻辑与

三元运算符

返回是否阻止