我可以在渲染后将两个道具类型加在一起吗？如果是这样，我怎样才能做到这一点？

Question

() 我有一个 div，我想根据一个道具的数量是否大于另一个道具来显示它。我在这个特定组件中有很多事情要做，我担心我尝试做的以下所有事情都是不可能的。

this.props.currentValue < this.props.newValue 对我不起作用，但其他一切正常。

我是 React 的新手。任何帮助都会很棒！

哦，currentValue 和 newValue 的值位于单独页面上的费率组件内。

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 的行没有呈现任何内容，因为您传递的是对函数本身的引用，而不是调用函数并呈现它的值 returns。

如果将 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 函数定义为箭头函数来稍微简化 class：

而不是这个：

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
}

class 两种方式的工作原理相同，但它节省了几行代码。

我可以在渲染后将两个道具类型加在一起吗？如果是这样，我怎样才能做到这一点？

Can I add two proptypes together after they are rendered? If so, how can I accomplish that?

if-statement

reactjs

react-proptypes