Семантический пользовательский интерфейс React Jsx Attribute, измененный состоянием без отображения класса css - PullRequest
Новая
       21

Семантический пользовательский интерфейс React Jsx Attribute, измененный состоянием без отображения класса css

0 голосов
/ 24 сентября 2019

В атрибуте JSX (компонент семантического пользовательского интерфейса) я перечислил переменную состояния, которая зависит от того, находится ли пользователь на мобильном телефоне или в браузере, как указано в этом пакете NPM здесь .

Код для JSX взят из семантической реакции пользовательского интерфейса, так что может иметь к этому какое-то отношение.У меня есть определенный класс для элемента JSX, который будет отображаться определенным образом, но установка переменной игнорирует эту команду.Следующий код устанавливается в функции ComponentDidMount. 

if (isBrowser) {
      this.setState({dependentOnView: "small"})
  } else {
    this.setState({dependentOnView: "huge"})
  }

Рассматриваемый атрибут JSX следующий: 

<List divided selection class="specialHighlight" size={this.state.dependentOnView}><List.Item> <Label color='blue' horizontal> Delayed - Theorizing Now</Label> Exchange </List.Item></List>

Состояние устанавливается в конструкторе следующим образом: 

this.state = {
        dependentOnView: ''
    }

Что я здесь не так делаю?

Конечно, пакет правильно импортирован, например, 

import {BrowserView,MobileView,isBrowser,isMobile} from "react-device-detect";

Рассматриваемый класс css полностью игнорируетсяthe after runtime. 

.specialHighlight {
position: absolute;
margin-top: 65vh;
line-height: 2vh;
font-size: 2vh;
margin-left: 3vw;

} ​​

Ответ: Это очень нишевый случай, но установка размера в элементе List ничего не сделала, но установила размер метки в ListПункт, который я пытался сделать в первую очередь, работал.Далее, когда я возвращался к изменениям, я забыл использовать {this. state .whateverattribute}.

Дальнейший ответ: Использование className в качестве атрибута означает, что собственный семантический пользовательский интерфейс css будет перезаписать css, который вы ввели, поэтому в этом случае я использовал class, но в большинстве случаев правильный способ - действительно использовать className.

Для людей, которые ищут ответ в будущем: 1. Убедитесь, что пакет правильно импортирован

Убедитесь, что атрибут Semantic JSX имеет правильно введенное состояние

Убедитесь, что состояние установлено правильно

Попробуйте изменить настройку класса css между class и className

Наконец, попробуйте установить другие элементы с помощью переменной состояния, это очень возможно по любой причине, которую семантика не допуститпеременные, которые должны быть установлены с определенными элементами

Если все остальное терпит неудачу, измените собственный CSS для семантического интерфейса пользователя

Большой привет комментатору MikeRos дляего вклад.

1 Ответ

1 голос
/ 25 сентября 2019
  1. Исправьте свой 'class'> 'className'

Здесь работает codesandbox для вас 

import React from "react";
import { isBrowser } from "react-device-detect";
import { List, Label } from "semantic-ui-react";

class Container extends React.Component {
  state = {
    dependentOnView: "huge"
  };

  componentDidMount() {
    if (isBrowser) this.setState({ dependentOnView: "small" });
  }

  render() {
    const { dependentOnView } = this.state;

    return (
      <List
        divided
        selection
        className="specialHighlight"
        size={`${dependentOnView}`}
      >
        <List.Item>
          <Label color="green" horizontal>
            Delayed - Theorizing Now
          </Label>
        </List.Item>
      </List>
    );
  }
}

export default Container;
...