Reactjs JSX条件呈现

我正在做我的第一个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;

const PresentationalComponent=({
params，
查询
}) => {
if（query.title==未定义）{
返回(
{params.title}

{params.content}

); 
}否则{
返回(
{query.title}

{query.content}

); 
}
};
导出默认HomeDetail；

这就是我尝试过的。但它发生了错误

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

{query.title==未定义？{item.title}:{query.title}

我们能简化它吗？

const PresentationalComponent=（{params，query}）=>(
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>
);

{query.title？query.title:params.title}

{query.title？query.content:params.content}

);

const PresentationalComponent=（{params，query}）=>(
{query.title？query.title:params.title}

{query.title？query.content:params.content}

);