Передача стиля из состояния компонента в ReactJS

Question

У меня есть следующий компонент:

import React from "react";
import { connect } from "react-redux";

class Filter extends React.Component {
  state = {
    value: ''
  };

  handleChange = (e) => {
    let value = e.target.value;
    if(value){
      document.getElementById("clear").style["display"] = "none";
      document.getElementById("fetch").style["display"] = "none";

    } else {
      document.getElementById("clear").style["display"] = "inline-block";
      document.getElementById("fetch").style["display"] = "inline-block";
    }
    this.setState({ value });
    this.props.handleFilter({ value });
  }

  render(){
  let content = this.props.items > 0 ? (
      <div
        className="filter"
        >
        <input
          id="search-input"
          type="text"
          placeholder="Search..."
          value={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    ) : <div></div>
    return content;
  }
}

const mapStateToProps = (state,props) => ({
  items: state.settings.length
});

module.exports = connect(mapStateToProps, null)(Filter);

Есть ли способ, которым я могу более изящно передать реквизиты для очистки и получения компонентов? Я пытаюсь стилизовать их, основываясь на взаимодействиях с моим поисковым входом (в основном, я хотел бы иметь возможность стилизовать их, когда мое значение поиска равно ""). Как я могу отправить стили как опору, основанную на состоянии моего текущего компонента?

Answer 1

Пожалуйста, отреагируйте, что это именно то, что вы ищете: пожалуйста, найдите образец ниже:

import React, {
  Component
} from 'react'
import injectSheet from 'react-jss'
import classNames from 'classnames'


class someComponent extends Component {
  handleClose = () => {}

  render() {
    const {
      classes,
    } = this.props

    return ( <
      div className = {
        classes.resize
      } >
      <
      /div>
    )
  }
}


const styles = {
  container: {
    width: '100%',
    height: '100rem'
    borderBottom: '10px'
  }
}

export default injectSheet(styles)(someComponent)

Answer 2

Если вы используете библиотеку с именем styled-components, вы можете легко сделать это, как в этом примере: https://www.styled-components.com/docs/basics. Идея с этой библиотекой заключается в том, что вы оборачиваете свои основные компоненты HTML, как <input> в <Input>затем используйте новый <Input> компонент в вашем методе render(). Новый компонент будет контролироваться путем передачи значений из вашего состояния в качестве реквизита.