Question

（）我有一个带有道具的div，我希望根据道具的数量是否比另一个道具更大来展示。我在这个特定组件中经历了很多事情，我担心以下所有我想要做的事情都是不可能的。

this.props.currentValue＆lt; this.props.newValue不适用于我，但其他一切工作正常。

我对React很新。任何帮助都会很棒！

哦，currentValue和newValue的值在单独页面上的rates组件内。

import React, {PropTypes, Component} from 'react';
import Header from '../compare-table-header/compare-table-header';
import './compare-table-row.css';

export class Rates extends Component {
    constructor(props) {
    super(props);
    this.displayThing = this.displayThing.bind(this);
}

displayThing() {
    const increase = <div>{this.props.details}</div>;
    const thing = <div>hi</div>;
    if (this.props.currentValue < this.props.newValue) {
        return increase;
    } else {
        return thing;
    }
}

render() {
    const {currentValue, newValue} = this.props;

    return (
        <div>
            <Header heading="Rates" />
                    <div className="value-heading">{currentValue}</div>
                    <div className="value-heading">{newValue}</div>
                    </div>
                    <div>{this.displayThing()}</div>
                </div>
            </div>
        </div>
    );
}
}

Rates.propTypes = {
    currentValue: PropTypes.number,
    newValue: PropTypes.number
};

Answer 1

this.displayThing行没有呈现任何内容，因为您正在传递对函数本身的引用，而不是调用函数并呈现它返回的值。

如果您将this.displayThing更改为this.displayThing()，那么该行应符合您的预期。

但是你也有一些不匹配的标签。 Header组件在同一行上打开和关闭。从你的缩进，看起来你的意思是它下面的行被渲染为Header组件的子节点，但这不是实际发生的。

你可以像这样清理它：

return (
    <div>
        <Header heading="Rates">
            <div className="value-heading">{currentValue}</div>
            <div className="value-heading">{newValue}</div>                        
        </Header>

        <div>{this.displayThing()}</div>
    </div>
);

或者，如果您的Header组件未呈现任何子项，则可能如下所示：

return (
    <div>
        <Header heading="Rates" />

        <div className="value-heading">{currentValue}</div>
        <div className="value-heading">{newValue}</div>                        

        <div>{this.displayThing()}</div>
    </div>
);

如果你想更进一步，你也可以通过将displayThing函数定义为箭头函数来删除一些代码并简化类：

而不是：

export class Rates extends Component {
    constructor(props) {
        super(props);
        this.displayThing = this.displayThing.bind(this);
    }

    displayThing() {
        const increase = <div>{this.props.details}</div>;
        const thing = <div>hi</div>;
        if (this.props.currentValue < this.props.newValue) {
            return increase;
        } else {
            return thing;
        }
    }

    // ... rest of the class
}

你可以将displayThing变为箭头函数并摆脱构造函数，如下所示：

export class Rates extends Component {
    displayThing = () => {
        const increase = <div>{this.props.details}</div>;
        const thing = <div>hi</div>;
        if (this.props.currentValue < this.props.newValue) {
            return increase;
        } else {
            return thing;
        }
    }

    // ... rest of the class
}

该类的工作方式相同，但它保存了几行代码。

渲染后可以将两个proptypes一起添加吗？如果是这样，我该怎么做呢？

1 个答案: