javascript - 是否可以在创建后设置 React 组件的样式？

Question

所以基本上我有一个 React 组件 <Bore /> .我有一个 Bores 的数组我需要为数组的第一个和最后一个元素设置样式。我知道如何使用 Bores[0] 访问这些元素和 Bores[Bores.length-1] .但我的问题是弄清楚如何在创建后设置这些特定组件的样式。我是否必须做类似 className += "newClass" 的事情？ .我使用 React 只有 2 天，所以非常感谢任何帮助。

Answer 1

您可以使用样式对象而不是改变类列表。重要的是要记住 CSS 属性是驼峰式的。有点像

class Parent extends Component {
    constructor(props){
        super(props);
        this.state = { 
            style: {
                backgroundColor: "green",
                marginRight: "10px"
            }
        } 
    }
    changeStyle = () => {
        this.setState(() => {
            return {
                style: {
                    marginLeft: "10px",
                    backgroundColor: "red"
                }
            }
        })
    }
    render = () => {
        return (
            <div>
                <Child style={this.state.style} changeStyle={this.changeStyle}
            </div>
        )
    }
}

const Child = ({ style, changeStyle }) => {
    return (
        <div style={style} onClick={changeStyle}>
          <h1>Dummy</h1>
        </div>
    )
}

https://jsfiddle.net/rfhmxts2/看到这里，点击 div 改变它的背景颜色和边距