Как сделать простой текст с тегом br?

Question

У меня есть простой компонент:

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

Но если состояние isSimple = true, то это покажет мне:

simple <br /> text

вместо:

simple
text

Кроме того, он не очень разборчивый. Можно ли выполнить условие if в середине метода рендеринга?

Answer 1

Вы можете заключить строку в объект с помощью {__html: 'your string here..'}, а затем использовать ее, используя dangerouslySetInnerHTML реквизиты:

render() {
  var text;

  if (this.state.isSimple) {
    text = <div dangerouslySetInnerHTML={{ __html: "simple <br /> text" }} />;
  } else {
    text = <div className="extended">extended</div>;
  }
  return text;
}

Фрагменты не поддерживают опасно SetInnerHTML , поэтому мне пришлось использовать div там.

class News extends React.Component {
  state = {
    isSimple: this.props.isSimple
  };
render() {
  var text;

  if (this.state.isSimple) {
    text = <div dangerouslySetInnerHTML={{ __html: "simple <br /> text" }} />;
  } else {
    text = <div className="extended">extended</div>;
  }
  return text;
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<News isSimple={true} />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

Почему вам нужно сохранить текст и вернуть его?вместо этого верните оператор 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>
       }
    );
  }
}

Answer 3

Я думаю, что вам не хватает возвращаемой части методов рендеринга

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