если заявление внутри всплывающей подсказки - PullRequest
Новая
       6

если заявление внутри всплывающей подсказки

0 голосов
/ 18 марта 2020

Я студент. У нас есть класс, в котором мы работаем над проектами, над которыми предыдущие студенты работали в течение нескольких лет, стараемся улучшить их, добавить новые вещи, которые хотят реальные клиенты. Я чувствую, что меня бросили в глубокий конец с этим.

Я никогда не использовал реакцию или Django, так что это крутая кривая обучения, но это веб-приложение, которое отображает информацию от тепловых датчиков вокруг нашего здания.

Моя задача звучит очень basi c: отобразить два отдельных всплывающих подсказка, один из которых показывает температуру и температуру, а другой - co2. 

render() {
  const sensors = this.props.sensors.filter(
    sensor => sensor.floor === this.props.floor
  );
  if (this.props.loading) {
    return (
      <ReactLoading
        className="busy wrapper"
        type="spinningBubbles"
        color="grey"
        height={100}
        width={100}
      />
    );
  }
  return [
    <div id="sensors" key="sensors" className={this.props.floor.toString()}>
      {sensors.map((sensor, index) => (
        <ReactTooltip
          key={index}
          id={sensor.serialID.toString()}
          type="info"
          effect="solid"
        >
          <span className="reading">ID: {sensor.serialID}</span>
          <span className="reading">Name: {sensor.name}</span>
          //conditional statement to seperate the two
          {sensor.temperature !== null && (
            <span className="reading">Temperature: {sensor.temperature}</span>
          )}
          {sensor.humidity !== null && (
            <span className="reading">Humidity: {sensor.humidity}</span>
          )}
          <span className="reading">C02:{sensor.co2}</span>
        </ReactTooltip>
      ))}
    </div>
  ];
}

этот бит кода, который мне сказали, нуждается в выражении if, поэтому в данный момент будут отображаться два круга их только один

example image

Я оглянулся вокруг, но, поскольку я на самом деле не знаю, что я делаю, я надеялся, что кто-то здесь может быть в состоянии помочь / объяснить

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Для условий IF внутри вы можете использовать формат ниже 

<ReactTooltip
      key={index}
      id={sensor.serialID.toString()}
      type="info"
      effect="solid"
    >
{xyz == 123 && <span>Heat and temp</span> //xyz == 123 will be your condition which you want to put in IF statement
{xyz == 345 && <sapn>CO2</span> //First argument before && will act like your conditional statement
</ReactTooltip>
0 голосов
/ 18 марта 2020

Общий шаблон для условного рендеринга JSX в реагирует с троичным. 

{someCondition ? (/* JSX if true */) : (/* JSX if false */)

В вашем коде вы можете переключать содержимое всплывающей подсказки на какое-то переключаемое значение где-то в пользовательском интерфейсе. Например, здесь я предполагаю, что существует некоторая переменная displayTempHumidity. 

{sensors.map((sensor, index) => (
  <ReactTooltip
    key={index}
    id={sensor.serialID.toString()}
    type="info"
    effect="solid"
  >
    <span className="reading">ID: {sensor.serialID}</span>
    <span className="reading">Name: {sensor.name}</span>

    //conditional statement to seperate the two
    {displayTempHumidity ? (
      <Fragment>
        {sensor.temperature !== null && (
          <span className="reading">Temperature: {sensor.temperature}</span>
        )}
        {sensor.humidity !== null && (
          <span className="reading">Humidity: {sensor.humidity}</span>
        )}
      </Fragment>
    ) : (
      <span className="reading">C02:{sensor.co2}</span>
    )}
  </ReactTooltip>
))}

Дайте мне знать, имеет ли смысл Fragment, где я ее использовал.

Просто из любопытство, знаете ли вы, какая версия React запущена в вашем проекте? Если это более старая кодовая база и пакеты не были обновлены, то ландшафт может немного отличаться от текущей практики.

...