如何在react中添加动态类？

Question

这里提到的宽度是内联的，所以我想做一个卡片组件，在那里宽度可以被动态地处理。我的意思是，将有一个卡片组件，可以通过jsx动态地处理宽度属性，假设一张卡的宽度是250 be，而对于另一张卡，宽度可能是100 be。

<div className="white-box v-align ht-100" style={{ width: '250px', marginRight: '10px' }}>
                        <div className="flex-one"></div>
                        <div className="wd-80">
                            <div className="fs-xl fw-bold" style={{ color: '#142654' }}>{pct}%</div>
                            <div className="small-text">{text}</div>
                        </div>
                        </div>

Answer 1

解决这个问题的方法可能是使用道具：

// SomeComponent.js class
class SomeComponent {
    // Uncomment if you need to set a state
    //constructor(props) {
    //    super(props);
    //
    //    this.state = {};
    //}

    render() {
        let width = Math.min(Math.max(this.props.width, SOME_MAX_WIDTH), SOME_MIN_WIDTH); // clamp (optional)

        return ( // replace with your component
            <div style={{width: width, backgroundColor: "#23a4f6"}}>
                Width set from parent (and clamped)
            </div>
        );
    }
}
SomeComponent.defaultProps = {
    width: 200
};

// SomeComponent.js in functional
function SomeComponent({width}) {
    let width = Math.min(Math.max(this.props.width, SOME_MAX_WIDTH), SOME_MIN_WIDTH); // clamp (optional)

    return ( // replace with your component
        <div style={{width: width, backgroundColor: "#23a4f6"}}>
            Width set from parent (and clamped)
        </div>
    );
}
SomeComponent.defaultProps = {
    width: 200
};

// main.js
ReactDOM.render(<SomeComponent />, document.querySelector(".myelement"));

Answer 2

您可以获取宽度变量(如let width = '100px' )，然后将此变量应用到代码中，如下所示。在这里，宽度可以作为支柱传递，它可以是任意值。

let width = '100px';
<div className="white-box v-align ht-100" style={{ width: width, marginRight: '10px' }}>
                        <div className="flex-one"></div>
                        <div className="wd-80">
                            <div className="fs-xl fw-bold" style={{ color: '#142654' }}>{pct}%</div>
                            <div className="small-text">{text}</div>
                        </div>
                        </div>