JSX 条件渲染

Question

我正在制作我的第一个 React-Redux 项目。

我想简单地改变下面的结构。

const PresentationalComponent = ({
    params,
    query
}) => {
    if (query.title === undefined) {
        return (
            <div>
                <article>
                    <h2>{params.title}</h2>
                    <hr></hr>
                    <p>{params.content}</p>
                </article>
            </div>
        ); 
    } else {
        return (
            <div>
                <div>
                <article>
                    <h2>{query.title}</h2>
                    <hr></hr>
                    <p>{query.content}</p>
                </article>
            </div>
            </div>
        ); 
    }
};

export default HomeDetail;

这是我尝试过的。但是会出现错误。

<article>
    <h2>{query.title === undefined ? {item.title} : {query.title}}</h2>

我们可以让它变得简单吗？

Answer 1

const PresentationalComponent = ({ params, query }) => (
    <div>
        <article>
            <h2>{query.title ? query.title : params.title}</h2>
            <hr></hr>
            <p>{query.title ? query.content : params.content}</p>
        </article>
    </div>
);