Question

我正在尝试创建一个用于REACT组件的自定义类名。我正在使用map函数来创建多个控件元素。我希望能够指定哪个UnitSelector，这样我的错误验证将突出显示正确的控件。

这是渲染代码：

    units ?
    units.map((unit, index) => {

        return (
            <div> 
                <UnitSelector className={ this.state.errors.unit + index }

以下是验证码：

    let errors = {};
    let errorFound = false;
    let tempUnits = this.state.units;

    //Can only add a new unit, if every Unit Selector has selected a unit.
    for( let i = 0; i < tempUnits.length; i++ ) {
        if( !tempUnits[i] || !tempUnits[i].number ) {
            errorFound = true;
            let fieldName = "unit" + i;
            errors[fieldName] = 'custom-error';
        }
    }

    if( !errorFound ) tempUnits.push();

    this.setState({ units: tempUnits, errors: errors });

我相信除了这部分外，一切都正常。

            <UnitSelector className={ this.state.errors.unit + index }

Answer 1

我最终使用的解决方案是将字段className应用于Unit，以便在映射时将className应用于UnitSelector。

    let tempUnits = [];
    tempUnits.push({ className: "" });

    this.state = {
        errors: {},
        units: tempUnits
    };

渲染现在看起来像这样：

    <UnitSelector  className={ unit.className }

验证码已更改为：

    addUnit() {

    let errors = {};
    let errorFound = false;
    let tempUnits = this.state.units;

    //Can only add a new unit, if every Unit Selector has selected a unit.
    for( let i = 0; i < tempUnits.length; i++ ) {
        if( !tempUnits[i] || !tempUnits[i].number ) {
            errorFound = true;
            tempUnits[i].className = 'custom-error';
        }
        else {
            //Clear this out to remove the custom error.
            tempUnits[i].className = "";
        }
    }

    if( !errorFound ) tempUnits.push({className: ""});

    this.setState({ units: tempUnits, errors: errors });

}

REACT JavaScript如何使用自定义类名？

1 个答案: