Пользовательский компонент Reactjs Checkbox нуждается в динамических цветах

Question

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

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

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

Answer 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"/>

Дальнейшее чтение

• Синтаксис распространения

Answer 2

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

Если все еще не ясно, я сообщу:)