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

2024-05-21 • 问答

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，但是我不确定是否必须重组该组件才能添加状态。

我将如何实现？

不能将json.loads添加到样式组件中，而只能传递state。但是样式化的组件可以在任何其他基于类或功能的组件内使用。您要做的是将颜色作为道具从React组件传递给样式化的组件，然后可以按如下所示导出React组件：

props

// 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"))

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

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

qyrwj 回答：是否可以像这样将状态添加到样式化的React组件中？

大家都在问