Можно ли добавить состояние к стилизованному компоненту реакции, как это?

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, пока это стилизованный компонент, или мне нужно превратить его в класс?

По сути, я просто планирую добавить метод handleClick для изменения bgColor, но я не уверен, что мне придется реструктурировать компонент, чтобы иметь возможность добавлять состояние.

Как мне этого добиться?

Answer 1

A state нельзя добавить только к стилизованному компоненту. props может быть передано. Но стилизованный компонент может использоваться внутри любого другого основанного на классе или функционального компонента. Что бы вы сделали, это передали цвет в качестве реквизита для стилизованного компонента из компонента 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, который обеспечит необходимую функциональность