在 React 中解构 props -> 需要帮助理解它在我的特定情况下是如何工作的

Question

我正在学习赫尔辛基大学整理的 fullstackopen2021 课程

我是一名开发新手，正在尝试熟悉解构，这让我有些困惑。

<App/> 组件看起来像这样

const App = () => {
    const course = 'Half stack application development',
        parts = [

            {
                name: 'Fundamentals of React',
                exercises: 10,
            },
            {
                name: 'Using props to pass data',
                exercises: 7,
            },
            {
                name: 'State of a  component',
                exercises: 14,
            }
        ];

    return (
        <>
            <table>
                <Header course={course} />
                <Content parts={parts} />
                <Total parts={parts} />
            </table>
        </>
    )
}

我的 <Content/> 组件看起来像这样

const Content = ({ parts: [part1, part2, part3] }) => {
    // console.log(part1, part3, part2);
    return (
        <>
            <thead>
                <tr>
                    <th>Course Content</th>
                    <th>Exercises</th>
                </tr>
            </thead>
            <tbody>
                <Part part={part1} />
                <Part part={part2} />
                <Part part={part3} />
            </tbody>
        </>
    )
}

我的组件看起来像这样

const Part = ({ part: { name, exercises } }) => {
    return (
        <>
            <tr>
                <th scope={"row"}>{name}</th>
                <td align={"right"}>{exercises}</td>
            </tr>
        </>
    )
}

我的解构在 <Content/> 组件中工作，但我不明白为什么它会像我上面那样工作，但是当我这样做时

const Content = ({ parts: {part1, part2, part3} }) => {
    //same as above
}

像这样使用 {} 花括号 { parts: {part1, part2, part3} 会导致应用程序崩溃。为什么这是不正确的？为什么其他实施有效？

Answer 1

从对象解构属性时需要使用花括号，从数组解构元素时需要使用方括号

例子

const obj = { name: 'me' }
const { name } = obj
console.log(name)

const arr = [1, 2, 3]
const [one, two, three] = arr
console.log(one, two, three)

在你的情况下是两者的结合

const obj = { arr: [1, 2, 3] }
// first destructure arr and then use brackets to destructure
// the elements from their indexes
const { arr: [one, two, three] } = obj
console.log(one, two, three)

您可以对嵌套属性执行相同的操作

const obj = { firstLevel: { secondLevel: { name: 'me' } } }
const { firstLevel: { secondLevel: { name } } } = obj
console.log(name)

在 React 中解构 props -> 需要帮助理解它在我的特定情况下是如何工作的

Destructuring props in React -> need help understanding how it works in my particular case

destructuring

reactjs

react-props