Reactjs

Question

我想在我的代码中添加一些标签 <Paper> 和 </Paper>。但我没能做到。这两个标签用于我的 html 代码。但是，当我运行我的代码时，它将我的代码显示为字符串：

const test = () => {

    const paperStyleTop = (nameMinistry) => {

        if (nameMinistry === "justice"
        ) {
            return `<Paper elevation={3} sx={{ ...(alertError && { border: "2px solid rgba(255,0,0,0.5)" }) }}>`
        } else {
            return `<Paper elevation={3}>`
        }

    }

    const paperStyleBottom = () => {
        return `</Paper>;`
    }

    const arrayMinistries = [
        {
            icon: "balance",
            nameMinistry: "Justice",
            id: "mJustice",
            useStateFullName: ministers.justice.fullName
        },
        {
            icon: "local_police",
            nameMinistry: "Intérieur",
            id: "mInterieur",
            useStateFullName: ministers.interieur.fullName
        }
    ]

return (

    {arrayMinistries.map((ministry) => (
        <Grid item}>

            {paperStyleTop(ministry.nameMinistry)}

            // Html code...

            {paperStyleBottom()}

        </Grid>
    ))}
)

export default test;

你能向我解释一下如何将这些行添加到我的代码中吗？

************** 解决方案 *************** 有了下面的提议，它就这样那样工作了：

const test = () => {

    const paperProps = (nameMinistry) => {

        const props = {
                    elevation: 3,
                };

        if (nameMinistry === "mJustice" ||
            nameMinistry === "mInterieur" ||
            nameMinistry === "mEducationNationale" ||
            nameMinistry === "mSante" ||
            nameMinistry === "mArmees" ||
            nameMinistry === "mEconomieFinance"
        ) {
            props.sx = { ...(alertError && { border: "2px solid rgba(255,0,0,0.5)" }) };
        } else {
            props.sx = {}
        }
        return props;
    }

    const arrayMinistries = [
        {
            icon: "balance",
            nameMinistry: "Justice",
            id: "mJustice",
            useStateFullName: ministers.justice.fullName
        },
        {
            icon: "local_police",
            nameMinistry: "Intérieur",
            id: "mInterieur",
            useStateFullName: ministers.interieur.fullName
        }
    ]

return (

    {arrayMinistries.map((ministry) => (
        <Grid item}>

            <Paper {...paperProps(ministry.id)}>

            // Html code...

            </Paper>

        </Grid>
    ))}
)

export default test;

Answer 1

这对我来说听起来像是一个 XY 问题。您似乎想将特定的 props 传递到 <Paper> 组件中：您不反对将 props 字典传播到其中吗？

您可以使用useMemo()来记忆您要传播的道具，这样该对象将根据依赖数组的变化进行更新。

示例：

const test = () => {

    const paperProps = useMemo(() => {
        const props = {
            elevation: 3,
        };

        if (ministry.nameMinistry === 'justice') {
            props.sx = { ...(alertError && { border: "2px solid rgba(255,0,0,0.5)" }) };
        }

        return props;
    }, [ministry.nameMinistry])

    return (
        <Grid item>
            <Paper {...paperProps}>
                {/* More content here */}    
            </Paper>
        </Grid>
    )
}

Reactjs - 如何在我的 html 中使用 "return </Paper>" 作为代码？

Reactjs - How use "return </Paper>" as code in my html?

return