javascript - 如何使用br标签呈现简单文本？

我有一个简单的组件：

class News extends Component {
  state = {
     isSimple: this.props.isSimple
  }
  render() {
    return (
      <div>
        <div className="extended">extended</div>
        simple text
      </div>
    );
  }
}

export default News;

我只想显示扩展的或简单的，所以我这样做：

class News extends Component {
  state = {
    isSimple: this.props.isSimple
 }
  render() {
    var text;
    if (this.state.isSimple) {
      text = "simple <br /> text";
    } else {
      text = <div className="extended">extended</div>
    }
    return (
      {text}
    );
  }
}

但是，如果state isSimple = true，那么这将向我显示：

simple <br /> text

代替：

simple
text

此外，它不是很清晰。我可以在render方法的中间设置if条件吗？

最佳答案

为什么需要保存文本并返回？而是返回jsx语句，而不是使用if语句，而是使用运算符。就像是：

class News extends Component {
  state = {
    isSimple: this.props.isSimple
  }
  render() {
    const { isSimple } = this.state;
    return (
       { isSimple ? <div>simple <br /> text</div>
       : <div className="extended">extended</div>
       }
    );
  }
}