是否可以像这样向样式化的 React 组件添加状态？

Question

import React from "react"
import styled from 'styled-components';

const Segment = styled.div`
    background-color: #1070ff;
    box-sizing: border-box;
    border-bottom: 6px solid #ffffff33;
    width: 400px;
    height: 70px;
    &:first-of-type {
        background-color: red !important;
    }
    &:last-child {
        border-radius: 0px 0px 35px 35px;
    }
`

export default Segment;

我知道我可以在此文件中创建函数，但是当它是样式化组件时是否可以为 Segment 设置状态，或者我是否必须将其变成 class？

基本上我只是计划添加一个 handleClick 方法来更改 bgColor 但我不确定是否必须重组组件才能添加状态。

我该如何实现？

Answer 1

无法将 state 添加到样式组件中，只能传递 props。但是样式化组件可以在任何其他基于 class 的组件或功能组件中使用。您要做的是将颜色作为 prop 从 React 组件传递给样式化的组件，然后您可以按如下方式导出 React 组件：

// If a color has been passed from props use that, if not use a default color value
const Segment = window.styled.div`
 background-color: ${props => (props.color ? props.color : "#1070ff")};
 box-sizing: border-box;
 border-bottom: 6px solid #ffffff33;
 width: 400px;
 height: 70px;
`

class SegmentClass extends React.Component {
 state = { color: "#000" }

 // If the color is black change to blue otherwise change to black
 changeColor = () => {
  this.setState((state, props) => {
   const { color } = state
   const newColor = color === "#000" ? "#1070ff" : "#000"
   return { color: newColor }
  })
 }

 render() {
  return <Segment color={this.state.color} onClick={this.changeColor} />
 }
}

ReactDOM.render(<SegmentClass />, document.getElementById("app"))

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

现在您可以导出将提供所需功能的 SegmentClass

是否可以像这样向样式化的 React 组件添加状态？

Is it possible to add a state to a styled react component like this?

reactjs

styled-components