IF语句有反应

Question

我有一个滑块，并且如果滑块有多个图像，我只想显示箭头。

我在返回中尝试了类似以下的内容

{(this.state.images > 1)
  <LeftArrow goToPrevSlide={this.goToPrevSlide} />
  <RightArrow goToNextSlide={this.goToNextSlide} />
}

我得到以下Parsing error: Unexpected token, expected "}"

Answer 1

您必须将两个元素都包装在一个容器中。无论容器内部如何，都将其视为“整体”。在下面的示例中，我使用的是空的Fragment容器

{ this.state.images > 1 && <>
  <LeftArrow goToPrevSlide={this.goToPrevSlide} />
  <RightArrow goToNextSlide={this.goToNextSlide} />
 </>
}
``

Answer 2

实际上，有一种方法可以准确地执行OP的要求。只需渲染并调用匿名函数，如下所示：

render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

Answer 3

您可以使用conditional语句渲染任何内容，例如if，else：

 render() {
    const price = this.state.price;
    let comp;

    if (price) {

      comp = <h1>Block for getting started with {this.state.price}</h1>

    } else {

      comp = <h1>Block for getting started.</h1>

    }

    return (
      <div>
        <div className="gettingStart">
          {comp}
        </div>
      </div>
    );
  }

Answer 4

if else结构的缩写按预期在JSX中工作

this.props.hasImage ? <MyImage /> : <SomeotherElement>

您可以在DevNacho的此博文中找到其他选项，但更常用速记来实现。如果需要更大的if子句，则应编写一个函数，该函数返回或组件A 或组件B。

例如：

this.setState({overlayHovered: true});

renderComponentByState({overlayHovered}){
    if(overlayHovered) {
        return <overlayHoveredComponent />
    }else{
        return <overlayNotHoveredComponent />
    }
}

如果将其作为参数，则可以从this.state解构overlayHovered。然后在render（）方法中执行该函数：

renderComponentByState(this.state)

Answer 5

如果您希望条件显示元素，则可以使用类似这样的东西。

renderButton() {
    if (this.state.loading) {
        return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
    }

    return (
        <Button onPress={this.onButtonPress.bind(this)}>
            Log In
        </Button>
    );
}

然后在render函数中调用help方法。

<View style={styles.buttonStyle}>
      {this.renderButton()}
</View>

或者您可以在return内使用其他条件。

{this.props.hasImage ? <element1> : <element2>}

Answer 6

您应该记住关于[[TERNARY运算符

：

所以您的代码将是这样，

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            { 
               this.props.hasImage ?  // if has image
               <MyImage />            // return My image tag 
               :
               <OtherElement/>        // otherwise return other element  

             }
        </div>
    )
}

Answer 7

也许我来不及在这里。但是我希望这会对某人有所帮助。首先将这两个元素分开。

renderLogout(){
<div>
   <LogoutButton onClick={this.handleLogoutClick} />
<div>
}

renderLogin(){
<div>
   <LoginButton onClick={this.handleLoginClick} />
<div>
}

然后您可以使用if else语句从render函数调用这些函数。
render(){
if(this.state.result){
  return this.renderResult();
}else{
  return this.renderQuiz();
}}

这对我有用。 ：）

Answer 8

如果您需要多个条件，那么可以尝试一下

https://www.npmjs.com/package/react-if-elseif-else-render

import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';

class Example extends Component {

  render() {
    var i = 3; // it will render '<p>Else</p>'
    return (
      <If condition={i == 1}>
        <Then>
          <p>Then: 1</p>
        </Then>
        <ElseIf condition={i == 2}>
          <p>ElseIf: 2</p>
        </ElseIf>
        <Else>
          <p>Else</p>
        </Else>
      </If>
    );
  }
}