Question

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

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更改背景颜色和边距

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

1 个答案: