Question

我有一个反应函数，可以在显示后返回数组中每个项目的列表。在maps函数中，我想检查是否满足某些参数，并根据这些if语句呈现不同的div。当我添加一个return()来包裹数组中的每个项目时，if语句会出错。如果我不添加return()，它将不会呈现任何内容。我想以一种不会在if语句中显示错误的方式呈现数组中的每个项目。这是我的代码如下：

export default function Details(props){
    return(
        <div>
            <p>Homiez</p>
            {
                props.details.map((detail) => {
                    if(detail.owes === 'Omar'){
                        <div>
                            <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
                        </div>
                    }
                    else if(detail.owed === 'Omar'){
                        <div>
                            <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
                        </div>
                    }
                    else {
                        <div>
                            <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
                        </div>
                    }
                })
            }
        </div>
    )
}

Answer 1

问题在于您不是从map函数内部返回的

export default function Details(props){
return(
    <div>
        <p>Homiez</p>
        {
            props.details.map((detail) => {
                if(detail.owes === 'Omar'){
                    return (<div>
                        <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
                    </div>);
                }
                else if(detail.owed === 'Omar'){
                    return (<div>
                        <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
                    </div>);
                }
                else {
                    return (<div>
                        <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
                    </div>);
                }
            })
        }
    </div>
)
}

Answer 2

始终最好将父级的呈现组件渲染问题提交给子级，您甚至可以尝试以下代码

function singleDeatilElement(details) {
    if(detail.owes === 'Omar'){
        return (<div>
                <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
            </div>);
        }
    else if(detail.owed === 'Omar'){
        return (<div>
            <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
        </div>);
    }
    else {
        return (<div>
            <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
        </div>);
    }
}

export default function Details(props){
let details = props.details.map((detail) => singleDeatilElement(details));

return(
    <div>
        <p>Homiez</p>
        {details}
    </div>
)
}

在React组件中发布渲染数组而不使用return

2 个答案: