Question

我确信这很容易，但出于某种原因，我无法弄清楚为什么我会得到相反的结果。如果我使用下面的代码，则返回第二个if结果。如果我将其更改为！= null，则返回第一个if结果。

import React from "react";

export default class ListButtons extends React.Component{

    render(){
        console.log(this.props.before); // null
        if(this.props.before == null){
            return (
                <div>
                    <ul className="pagination">
                        <li>
                            <a href="#">Next</a>
                        </li>
                    </ul>
                </div>
            )
        }else{
            return (
                <div>
                    <ul className="pagination">
                        <li>
                            <a href="#">Previous</a>
                        </li>
                        <li>
                            <a href="#">Next</a>
                        </li>
                    </ul>
                </div>
            )
        }

    }
}

Answer 1

试试这个：

import React from "react";

export default class ListButtons extends React.Component{
    render(){
            const content = !!this.props.before ? (
                <li>
                        <a href="#">Previous</a>
                </li>
                <li>
                        <a href="#">Next</a>
                </li>
            ) : (
                <li>
                        <a href="#">Next</a>
                </li>
            )

            return (
                    <div>
                            <ul className="pagination">
                                    {content}
                            </ul>
                    </div>
            )
    }
}

如果这不起作用，则设置this.props.before的位置/方式可能会出错。

如果陈述与我期待的完全相反

1 个答案: