Question

我需要在功能组件内部调用一个函数。这样。

const title = {
    title1: ['Skills', [
        'JavaScript',
        'HTML',
    ]]
};
const cards = () => {
    const li = (title) => {
        title.map((liKey) => {
            return <li key={liKey}>{liKey}</li>
        })
    }

    return (
        <Row>
            <Col lg={4} xl={4}>
                <Card 
                    title1={title.title1[0]}
                    li1={li(title.title1[1])}
                />
            </Col>
        </Row>
    )
};

输出：

JavaScript

HTML

但是，如果我尝试使用li函数，它将显示为空而不是项目列表。

但是，如果我尝试像下面这样放置，它确实可以工作。

const cards = () => {
    return (
        <Row>
            <Col lg={4} xl={4}>
                <Card 
                    title1={title.title1[0]}
                    li1={title.title1[1].map((liKey) => {
                       return <li key={liKey}>{liKey}</li>
                    }))}
                />
            </Col>
        </Row>
    )
};

谁能解释为什么？谢谢。

Answer 1

在return内添加li()语句：

const li = (title) => {
    return title.map((liKey) => {
        return <li key={liKey}>{liKey}</li>
    })
}

或者完全消除花括号，这意味着返回：

const li = title => 
    title.map((liKey) => {
        return <li key={liKey}>{liKey}</li>
    })

在功能组件中调用函数

1 个答案: