Question

我想知道如何以现在的方式进行条件渲染。有没有一种方法可以将检查过的布尔值isVisible = true添加到div上？它只会是真的。

会不会有问题，因为组件的状态在呈现后确实会发生变化？

import React from "react";

class BeerCard extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      isVisible: "false",
      isClicked: "not clicked"
    };
  }

  componentDidMount() {
    this.setState({
      isVisible: "false",
      isClicked: "not clicked"
    });
    if (this.props.beer.ph === 4.4) {
      this.setState({
        isVisible: "true"
      });
    }
  }

  onClicked = e => {
    this.setState({
      isClicked:
        this.state.isClicked === "is clicked" ? "not clicked" : "is clicked"
    });
  };

  render() {
    return (
      <div className="beerlist__item" isVisible="true" onClick={this.onClicked}>
        {this.state.isVisible}
        <h2>{this.props.beer.name}</h2>
        <h3>{this.props.beer.ph}</h3>
        <p>{this.props.beer.tagline}</p>
      </div>
    );
  }
}

export default BeerCard;

Answer 1

您可以调用返回一些JSX代码的函数

renderCode() {
  if (this.state.isVisible) {
    return ( <div>HelloWorld....</div>);
  }
  return null
}

render() {
  return (
    <div>
      {this.renderCode()}
    </div>
  )
}

或者内联

render() {
  return (
    <div>
      {
        this.state.isVisible ? <div>Helloworld...</div> : null
      }
    </div>
  )
}

Answer 2

可以做到

if (!visible) return null 
return (
      <div className="beerlist__item" isVisible="true" onClick={this.onClicked}>
        {this.state.isVisible}
        <h2>{this.props.beer.name}</h2>
        <h3>{this.props.beer.ph}</h3>
        <p>{this.props.beer.tagline}</p>
      </div>
    );

Answer 3

使用此：

 render() {
    return (
      <div className="beerlist__item" isVisible="true" onClick={this.onClicked}>
        {this.state.isVisible &&
            <h2>{this.props.beer.name}</h2>
            <h3>{this.props.beer.ph}</h3>
            <p>{this.props.beer.tagline}</p>
        }

      </div>
    );
  }

Answer 4

您不需要在div标签中编写isVisible =“ true”-您可以像下面这样进行条件渲染-

render() {
    return (
      <div className="beerlist__item" onClick={this.onClicked}>
        {this.state.isVisible &&
            <h2>{this.props.beer.name}</h2>
            <h3>{this.props.beer.ph}</h3>
            <p>{this.props.beer.tagline}</p>
        }

      </div>
    );
  }

Answer 5

如果我的问题正确无误，那么会有一个HTML属性hidden可以为您提供帮助。您可以将渲染返回设置如下：

render() {
    return (
      <div className="beerlist__item" hidden={!this.state.isVisible} onClick={this.onClicked}>
        {this.state.isVisible}
        <h2>{this.props.beer.name}</h2>
        <h3>{this.props.beer.ph}</h3>
        <p>{this.props.beer.tagline}</p>
      </div>
    );
}

请记住，React.Node仍然存在于React Virtual DOM中，并且该组件状态中发生的任何更改都将触发子React组件的render方法。

PS。我注意到，在您的componentDidMount中，您呼叫setState，此后如果满足条件，则运行另一个状态更改。我想提醒您，setState正在异步运行，您应该使用可以在second parameter中定义的回调函数，该回调函数将在状态有效改变时执行。

在div上反应条件渲染？

5 个答案: