时间戳

首页 > 解决方案 > 在 ReactJS 中从组件状态传递样式

javascript - 在 ReactJS 中从组件状态传递样式

问题描述

我有以下组件：

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

有没有办法可以更优雅地将道具传递给 clear 和 fetch 组件？我正在尝试根据与我的搜索输入的交互来设置它们的样式（基本上，我希望能够在我的搜索值为“”时设置它们的样式）。如何根据当前组件的状态将样式作为道具发送？

标签： javascriptcssreactjseventsreact-props

解决方案

请 react-jss 正是您要搜索的内容：请在下面找到示例：

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)

推荐阅读