从ReactJS的组件状态传递样式

Question

I have the following component:

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);

Is there a way I can more gracefully pass props to the clear and fetch components? I'm trying to style them based on interactions with my search input (basically, I'd like to be able to style them whenever my search value is at ""). How do I send down styles as a prop based on the state of my current component?

Answer 1

If you use a library called styled-components, you can easily do this like in this example: https://www.styled-components.com/docs/basics#passed-props . The idea with that lib is that you wrap your basic HTML components, like <input> to <Input> , then use the new <Input> component in your render() method. The new component will be controlled by passing values from your state as a prop.

Answer 2

Please react-jss that is exactly what you are searching for: please find the sample below:

 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)