javascript - 创建后可以对React组件进行样式设置吗？

所以本质上我有一个React组件<Bore />。我有一个Bores数组，我需要设置数组的第一个和最后一个元素的样式。我知道如何使用Bores[0]和Bores[Bores.length-1]访问这些元素。但是我的问题是弄清楚创建后如何对这些特定组件进行样式设置。我需要做类似className += "newClass"的事情吗？我只有2天的时间可以使用React，所以任何帮助将不胜感激。

最佳答案

您可以使用样式对象，而不是更改类列表。要记住的重要一点是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更改其背景颜色和边距