Nano Hash - криптовалюты, майнинг, программирование

Пользовательскому компоненту флажка Reactjs нужны динамические цвета

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

Я просто не знаю, как добавить эту функциональность в компонент флажка. Мне нужны разные цвета, типы и размер для флажка. Я хотел бы изменить цвет фона в зависимости от типа флажка, поэтому, если основной = синий, успех = зеленый и так далее.

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true,

    };
    this.onChange = this.onChange.bind(this);
  }


  onChange = () => {
    this.setState({
      checked: !this.state.checked
    });

  }


  render() {
    return ( 
     <div className="checkbox" onClick={this.onChange}>
      <div className="checkbox-box"> {
        this.state.checked &&
        <span className="checkbox-box-mark">
        <svg 
          viewBox = "0 0 64 64"
          xmlns = "http://www.w3.org/2000/svg"
        >
        <path 
          d="M21.33,57.82,0,36.53l5.87-5.87L21.33,46.09,58.13,9.36,64,15.23,21.33,57.82"/>
        </svg>
        </span>
      } 
      </div>  
      <div className="checkbox-label">checkbox</div> 
      </div>   
    );
  }
}
export default Checkbox
reactjs javascript css sass
10.10.2019

Ответы:


1

Простой способ сделать это — настроить объект стилей в компоненте Checkbox для определения стилей primary, success и info и добавить атрибут style к родительскому компоненту div, который обновляет свой стиль на основе типа (переданного через свойства), когда флажок установлен.

Итак, есть три ключевых момента:

1) Мы передаем свойство type компоненту. В компоненте мы присваиваем это значение свойству нового типа в состоянии.

2) Мы создали объект стилей, который содержит цвета фона для каждого типа флажка.

3) Мы назначаем объект цвета из объекта стилей, если checked истинно.

Давайте разберем, как это работает:

style={checked ? { width: '50px', ...styles[type] } : { width: '50px' }}

Атрибут style принимает объект. В случае, когда checked равно false, мы хотим вернуть объект, определяющий ширину, но если checked равно true, мы хотим вернуть объект с определением ширины и определением цвета из стилей. В приведенной выше строке я использовал тройную операцию, что переводится как:

если (отмечено), используйте комбинированный объект ширины и styles[type] объект (иначе) просто используйте объект с определением ширины`.

const { Component } = React;

// App.js

function App() {
  return (
    <div className="App">
      <Checkbox type="primary" />
      <Checkbox type="success" />
      <Checkbox type="info" />
    </div>
  );
}

// Checkbox.js


// Style definitions
const styles = {
  primary: { backgroundColor: 'blue' },
  success: { backgroundColor: 'green' },
  info: { backgroundColor: 'cyan' }
}

class Checkbox extends Component {

  constructor(props) {
    super(props);

    // Set a new type property in state and assign the
    // props value of type to it
    this.state = { type: props.type, checked: false };
    this.onChange = this.onChange.bind(this);
  }

  onChange = () => {
    this.setState({ checked: !this.state.checked });
  }

  render() {
  
    // Destructure the type and checked properties from state
    const { type, checked } = this.state;
  
    return (
      <div className="checkbox" onClick={this.onChange}>
        {/* If the box is checked set a width of 50px and apply the styles for that type */}
        {/* Otherwise just set a width of 50px */}
        <div
          className="checkbox-box"
          style={checked ? { width: '50px', ...styles[type] } : { width: '50px' }}
        >
          <span className="checkbox-box-mark" >
            <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
              <path d="M21.33,57.82,0,36.53l5.87-5.87L21.33,46.09,58.13,9.36,64,15.23,21.33,57.82"/>
            </svg>
          </span>
        </div>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.querySelector("#root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"/>

Further reading
10.10.2019
  • Привет, Энди, спасибо за помощь - я совершенно новичок в этом, и в данный момент это выше моего понимания. Я вижу, что это работает, но не понимаю, почему это работает и как я могу заставить свою работать так же, как у вас. 10.10.2019
  • @Fulano, я добавил к ответу несколько дополнительных комментариев. Надеюсь, поможет. 10.10.2019

    • 2

    это довольно просто: 1. определите тип вашего компонента ("основной" и т. д.) как свойство состояния компонента 2. Не забудьте вызвать setState, когда вы хотите изменить это свойство. 3. визуализировать все другие зависимые свойства в методе рендеринга с использованием условного рендеринга: https://reactjs.org/docs/conditional-rendering.html

    Если все еще не ясно, я дам мне знать :)

    10.10.2019
  • Привет Денис, спасибо за предложение. Я не получаю SetState - я продолжаю биться головой о стену. 10.10.2019
  • Привет Фулано, вы можете проверить, как это работает здесь: codepen.io/luvram/pen/MyKvOE (результат в нижней части окна) 10.10.2019
  • А вот как вы должны установить свойства css: создайте классы с набором свойств (цвет фона, размер и т. д., а затем установите соответствующий класс): upmostly.com/tutorials/change-the-background-color-in-react 10.10.2019
  • Привет, Денис, я понимаю, что там делает setState, но как я могу назвать свой компонент следующим образом: ‹Checkbox type='primary' › ‹/Checkbox› Основным типом здесь будет className, и этот класс будет синим и красным, если Я вызываю предупреждение и так далее. Я думаю, что для этого нужна функция, но я не знаю, куда ее поместить или логику для нее. 10.10.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..