我想知道属性如何＆＃x27;在此React代码（提供此道具的方式）中起作用）

发布于 2025-02-07 07:55:17 字数 610 浏览 0 评论 0原文

父组件！

<CarouselSlick 
    items={suffled || children}
    {…customFields}
    isSwipe={false}
    hideControlsMobile={false} 
/>

子部分！

const CarouselSlick = (props) => {
  const {
    items = [],
    hideControlsMobile,
    isAutoPlay = false,
    isSwipe = true,
  } = props;

为什么有一个空数组？据我所知，

const { items } = props;

上述代码是我所知道的。为什么“ ISSWIPE”变得“ true”？它的原始值是从父组件中的错误。我一直在看这个代码数字，

const { items, hideControlsMobile, isAutoPlay, isSwipe } = props;

我可能知道那是如何运作的吗？

原文

Parent Component!

<CarouselSlick 
    items={suffled || children}
    {…customFields}
    isSwipe={false}
    hideControlsMobile={false} 
/>

Child Component!

const CarouselSlick = (props) => {
  const {
    items = [],
    hideControlsMobile,
    isAutoPlay = false,
    isSwipe = true,
  } = props;

why is there an empty array?
As far as I know,

const { items } = props;

Above code is what I've known.
And why 'isSwipe' is getting 'true'? Its original value is false from Parent Component.
I have been watching only this code figure

const { items, hideControlsMobile, isAutoPlay, isSwipe } = props;

May I know how that is operating?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

踏雪无痕 2025-02-14 07:55:17

ISSWIPE必须是错误的，这就是JavaScript中默认值概念到可变初始化，如果未定义，则默认值，
eCmascript 2015允许默认参数值作为默认值，

var i = {items:[1,2,3], isOk:false}
console.log(i)
{items: Array(3), isOk: false}

const {items} = i;
console.log(items)
(3) [1, 2, 3]

const {items = []} = i;
console.log(items)
(3) [1, 2, 3]

const {items = [], isOk = true} = i;
console.log(isOk)
false

在您的情况下，名称不匹配，

<CarouselSlick /> cant be child of <Carousel />

可能的修复，

const Carousel = () => {

  return(
    <CarouselSlick 
      items={suffled || children}
      {…customFields}
      isSwipe={false}
      hideControlsMobile={false} 
    />
  )
}

const CarouselSlick = (props) => {
  const {
    items = [],
    hideControlsMobile,
    isAutoPlay = false,
    isSwipe = true,
  } = props;

isSwipe must be false, that is default values concept in javascript to variable initialization with default values if undefined,
ECMAScript 2015 allows default parameter values as default values,

var i = {items:[1,2,3], isOk:false}
console.log(i)
{items: Array(3), isOk: false}

const {items} = i;
console.log(items)
(3) [1, 2, 3]

const {items = []} = i;
console.log(items)
(3) [1, 2, 3]

const {items = [], isOk = true} = i;
console.log(isOk)
false

in you case, name mismatch,

<CarouselSlick /> cant be child of <Carousel />

possible fix,

const Carousel = () => {

  return(
    <CarouselSlick 
      items={suffled || children}
      {…customFields}
      isSwipe={false}
      hideControlsMobile={false} 
    />
  )
}

const CarouselSlick = (props) => {
  const {
    items = [],
    hideControlsMobile,
    isAutoPlay = false,
    isSwipe = true,
  } = props;

回复收藏 0 原文

孤凫 2025-02-14 07:55:17

这些是默认值。 React中的组件就像JS功能一样。如果carouselslick component在没有isswipe参数的情况下被调用，则将设置为组件内的false。物品也是如此。

示例父部分：

<CarouselSlick
  {…customFields}
  hideControlsMobile={false} 
  isAutoPlay={true}
/>

子组件：

const CarouselSlick = (props) => {
  const {
  items = [],
  hideControlsMobile,
  isAutoPlay = false,
  isSwipe = true,
} = props;

// results
console.log(items)              // []
console.log(hideControlsMobile) // false
console.log(isAutoPlay)         // true
console.log(isSwipe)            // true

Those are default values. Components in React are just like JS functions. If CarouselSlick component was called without isSwipe parameter it would be set to false inside the component. The same happens with items.

Example parent component :

<CarouselSlick
  {…customFields}
  hideControlsMobile={false} 
  isAutoPlay={true}
/>

Child component:

const CarouselSlick = (props) => {
  const {
  items = [],
  hideControlsMobile,
  isAutoPlay = false,
  isSwipe = true,
} = props;

// results
console.log(items)              // []
console.log(hideControlsMobile) // false
console.log(isAutoPlay)         // true
console.log(isSwipe)            // true

回复收藏 0 原文

~没有更多了~