Question

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      check1 : false,
      check2 : false,
      checktext : ""
      .
      .
      }

oncheck=(e)=>
{
  this.setState({ check1 : !this.state.check1})
}
oncheck2=(e)=>
{
  this.setState({ check2 : !this.state.check2})
}

 render() {
      if( this.state.check1 === true) {
        this.state.checktext= "Marked true";
      }
      else if(this.state.check1 === false)
      {
        this.state.checktext= "Marked false";
      }
      .
      .
      .
      return (
      .
      . 
      .
       <input type="checkbox" checked={this.state.check1} onChange={this.oncheck}/> <br />
      <input type="checkbox" checked={this.state.check2} onChange={this.oncheck2}/> <br />
      <p> Text {this.state.checktext}  </p>

此代码正常但控制台错误请勿直接改变状态。使用setState（）react / no-direct-mutation-state。如何在渲染块之前使用if else。谢谢。

Answer 1

你不需要国家来实现你正在做的事情只需使用像

这样的变量

 render() {
 var checktext=""
      if( this.state.check1 === true) {
        checktext= "Marked true";
      }
      else if(this.state.check1 === false)
      {
        checktext= "Marked false";
      }

并像

一样使用它

<p> Text {checktext} </p>

Answer 2

你应该这样做：

EntityManager

有关详细信息，请参阅文档：https://reactjs.org/docs/react-component.html#setstate

Answer 3

您可以在method内拨打render()并在该方法内进行验证检查。

例如：

render(){
     this.doValidation();
     ....

在doValidation()内，您可以检查验证。

 doValidation(){ 
     if( this.state.check1 === true) {
         this.setState({check5: "Marked true"}); 
     } else if (this.state.check1 === false) {
         this.setState({check5: "Marked false"}); 
     } 
}

Answer 4

只需微调@ supra28回答，如果var check1只能有真或假，那么你可以使用下面的代码，因为如果条件在可能的地方作为最佳实践是好的。

render() {
   var checktext="";
   checktext = (this.state.check1 === true) ? "Marked true" : "Marked false";
}

Reactjs如何在渲染块之前使用if ... else

4 个答案: