Question

我正在学习当下的反应。这是代码的链接 - http://redux.js.org/docs/basics/ExampleTodoList.html

我在理解代码的这部分内容时遇到了一些困难

resources :products do
    resource :like, only: [:create,:destroy], module: :products
    resource :collect, only: [:create,:destroy], module: :products do
      put :sort, on: :collection
    end
    member do
      get :toggle_status
    end
  end

我最难理解这个片段

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a
      href="#"
      onClick={e => {
        e.preventDefault()
        onClick()
      }}
    >
      {children}
    </a>
  )
}

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

{children}在这里意味着什么？它做了什么？

这是做什么的？

return (
        <a
          href="#"
          onClick={e => {
            e.preventDefault()
            onClick()
          }}
        >
          {children}
        </a>
      )
    }

上一行节点的含义是什么？

Answer 1

使用自定义组件时，例如

<MyComponent>Hello World</MyComponent>

无论你在标签之间写什么（在上面的例子中，Hello World）都作为children道具传递给组件。

所以编写像

这样的组件时

const Link = ({ active, children, onClick }) => {

您正在对道具进行解构，并仅从传递给组件的道具中获取active，children和onClick

例如，考虑将Link组件称为

<Link active="true" onClick={someFunc} style={{color: 'orange'}}>Hello</Link>

然后在所有道具active, onClick, style, children中，您只会访问该组件中的active, onClick,children。

关于你的第二个问题：

这是做什么的？

children：PropTypes.node.isRequired，

所以这里PropTypes是一种在传递给组件的道具上执行typeCheck的方法。它是从react-proptypes包中导入的。

所以

children: PropTypes.node.isRequired

使道具children成为必需品。因此，如果你的组件像

那样渲染

<Link />

它不会通过类型检查，因此您需要执行

<Link>Text</Link>

Answer 2

children: PropTypes.node.isRequired,

这只是反应类型的类型检查。有关类型检查的工作原理，请参阅https://facebook.github.io/react/docs/typechecking-with-proptypes.html。

根据示例，这表示道具儿童是必需的并且属于节点类型。此类型node指的是可以呈现的任何内容。然后将其包含在渲染中的标记内。

Answer 3

如果您关心道具的类型，则需要使用React.PropsWithChildren，例如

type Props = React.PropsWithChildren<{
  name: string; // strongly typed!
  myProp: string;
}>;

export function MyComponent({ name, myProp, children }: Props) {
  return (
    <>
      <div>{name}</div>
      <div>{myProp}</div>
      {children != null && children}
    </>
  )
}

React组件中的子prop

3 个答案: