Javascript 在div上进行条件渲染？

我想知道什么是一种方法来做条件渲染的方式，我现在这样做。 是否有方法将布尔值checked 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;

从“React”导入React；
类BeerCard扩展了React.Component{
建造师（道具）{
超级（道具）；
控制台日志（道具）；
此.state={
可见：“假”，
单击：“未单击”
};
}
componentDidMount（）{
这是我的国家({
可见：“假”，
单击：“未单击”
});
如果（this.props.beer.ph==4.4）{
这是我的国家({
可见：“真实”
});
}
}
onClicked=e=>{
这是我的国家({
单击：
this.state.isClicked==“已单击”？“未单击”：“已单击”
});
};
render（）{
返回(
{this.state.isVisible}
{this.props.beer.name}
{这个。道具。啤酒。ph}
{this.props.beer.tagline}

);
}
}
出口默认啤酒卡；

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

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

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

renderCode（）{
if（this.state.isVisible）{
返回（HelloWorld…）；
}
返回空
}
render（）{
返回(
{this.renderCode（）}
)
}

或者在线进行

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

render（）{
返回(
{
this.state.isVisible？Helloworld…：null
}
)
}

您可以这样做

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>
    );

if（！visible）返回null
返回(
{this.state.isVisible}
{this.props.beer.name}
{这个。道具。啤酒。ph}
{this.props.beer.tagline}

);

使用以下方法：

 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>
    );
  }

render（）{
返回(
{this.state.isVisible&&
{this.props.beer.name}
{这个。道具。啤酒。ph}
{this.props.beer.tagline}

}
);
}

您不需要在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>
    );
  }

render（）{
返回(
{this.state.isVisible&&
{this.props.beer.name}
{这个。道具。啤酒。ph}
{this.props.beer.tagline}

}
);
}

如果我答对了你的问题，有一个HTML属性可以帮助你。 可以将渲染返回设置为如下所示：

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>
    );
}

render（）{
返回(
{this.state.isVisible}
{this.props.beer.name}
{这个。道具。啤酒。ph}
{this.props.beer.tagline}

);
}

请记住，

React.Node

仍然存在于React虚拟DOM中，该组件状态中发生的任何更改都将触发子React组件的

render

方法

另外，我注意到在您的

组件didmount

中，您调用

setState

，然后，如果条件满足，您将运行另一个状态更改。 我想提醒您，

setState

是异步运行的，您应该使用可以在中定义的回调函数，该函数将在状态有效更改时执行