Question

我不熟悉 NextJS 和 React，所以我设置了一个示例应用程序来学习绳索。我正在尝试访问我传递给组件的一些道具，但它们似乎只能在 return() 之外工作。以下是我设置的示例组件，其中包含我可以访问 props 和不能访问 props 的示例。有什么我遗漏的吗？

import React from 'react';
import { InlineTextarea, BlocksControls } from 'react-tinacms-inline'

export function HeroWithVideo({ 
            css_classes, 
            video_url, 
            poster_url, 
            muted, 
            loop, 
            playsinline, 
            autoplay 
}) {

// Works
console.log(muted)

return (
    <div
        className="mt-20 text-center max-w-6xl mx-auto"
    >
        {/* Doesn't Work */}
        {muted}
        <video>

        </video>
        <h1>
            <InlineTextarea name="heading" focusRing={false} />
       </h1>
    </div>
)
}

export const heroWithVideoBlock = {
Component: ({ index, data }) => (
  <BlocksControls
    index={index}
    focusRing={{ offset: 0 }}
    insetControls
>
    <HeroWithVideo {...data} />
  </BlocksControls>
),
template: {
    label: 'Hero with Video',
    defaultItem: {
        headline: 'Default Hero Headline',
    },
    fields: [
        {
            name: 'css_classes',
            label: 'CSS Classes',
            component: 'text',
        },
        {
            name: 'video_url',
            label: 'Video URL',
            component: 'text',
        },
        {
            name: 'muted',
            label: 'Muted',
            component: 'toggle',
        },
        {
            name: 'loop',
            label: 'Loop',
            component: 'toggle',
        },
        {
            name: 'playsinline',
            label: 'Plays Inline',
            component: 'toggle',
        },
        {
            name: 'autoplay',
            label: 'Autoplay',
            component: 'toggle',
        },

    ],
},
}

Answer 1

你应该这样工作。

export function HeroWithVideo({...data}){

const {css_classes,video_url,poster_url,muted,loop,playsinline,autoplay } = data

}

那么你就可以轻松使用这些道具了：

{muted ? <div> </div> : "" }

<div className={css_classes} />

如何在 NextJS 中访问组件内部的道具

1 个答案: