将反应组件作为道具传递

Question

可以说我有：

import Statement from './Statement';
import SchoolDetails from './SchoolDetails';
import AuthorizedStaff from './AuthorizedStaff';

const MultiTab = () => (
  <Tabs initialIndex={1} justify="start" className="tablisty">
    <Tab title="First Title" className="home">
      <Statement />
    </Tab>
    <Tab title="Second Title" className="check">
      <SchoolDetails />
    </Tab>
    <Tab title="Third Title" className="staff">
      <AuthorizedStaff />
    </Tab>
  </Tabs>
);

在 Tabs 组件中， this.props 具有属性

+Children[3]
className="tablist"
justify="start"

Children[0] (this.props.children) 看起来像

$$typeof:
Symbol(react.element)
_owner:ReactCompositeComponentWrapper
_self:null
_shadowChildren:Object
_source:null
_store:Object
key:null
props:Object
ref:null
type: Tab(props, context)
__proto__
Object

Children[0].props 看起来像

+Children (one element)
className="home"
title="first title"

最后 Children 对象看起来像（这是我想要传递的）：

$$typeof:Symbol(react.element)
_owner:ReactCompositeComponentWrapper
_self:null
_shadowChildren:undefined
_source:null
_store:
key:null
props:Object
__proto__:Object
**type: function Statement()**
ref:null

问题是这样的，如果我这样重写 MultiTab

<Tabs initialIndex={1} justify="start" className="tablisty">
  <Tab title="First Title" className="home" pass={Statement} />
  <Tab title="Second Title" className="check" pass={SchoolDetails} />
  <Tab title="Third Title" className="staff" pass={AuthorizedStaff} />
</Tabs>;

选项卡组件内部

this.props.children 看起来和上面一样。

children[0].props 看起来像

classname:"home"
**pass: function Statement()**
title: "First title"

我希望 pass 属性看起来像。上面只是打印出 Statement 函数。

$$typeof:Symbol(react.element)
_owner:ReactCompositeComponentWrapper
_self:null
_shadowChildren:undefined
_source:null
_store:
key:null
props:Object
__proto__:Object
**type: function Statement()**
ref:null

这是一个奇怪的问题，但长篇大论我正在使用图书馆，这就是它的归结。

原文由 chefcurry7 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 this.props.children 是将实例化组件传递给反应组件的惯用方式

const Label = props => <span>{props.children}</span>
 const Tab = props => <div>{props.children}</div>
 const Page = () => <Tab><Label>Foo</Label></Tab>

当您直接将组件作为参数传递时，您会未实例化地传递它并通过从道具中检索它来实例化它。这是传递组件类的惯用方式，然后将由组件沿树向下实例化（例如，如果组件在标签上使用自定义样式，但它想让消费者选择该标签是 div 还是 span ） ：

 const Label = props => <span>{props.children}</span>
 const Button = props => {
 const Inner = props.inner; // Note: variable name _must_ start with a capital letter
 return <button><Inner>Foo</Inner></button>
 }
 const Page = () => <Button inner={Label}/>

如果您想要做的是传递一个类似儿童的参数作为道具，您可以这样做：

 const Label = props => <span>{props.content}</span>
 const Tab = props => <div>{props.content}</div>
 const Page = () => <Tab content={<Label content='Foo' />} />

毕竟，React 中的属性只是常规的 JavaScript 对象属性，可以保存任何值——无论是字符串、函数还是复杂对象。

原文由 Stefan Dragnev 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

正如已接受的答案中所述 - 您可以使用特殊的 { props.children } 属性。但是 - 您可以根据标题请求将组件作为道具传递。我认为这有时更清晰，因为您可能想要传递多个组件并让它们在不同的地方呈现。这是反应文档，其中包含如何执行此操作的示例：

https://reactjs.org/docs/composition-vs-inheritance.html

确保你实际上传递的是一个组件而不是一个对象（这最初让我感到困惑）。

代码很简单：

 const Parent = () => {
  return (
    <Child  componentToPassDown={<SomeComp />}  />
  )
}

const Child = ({ componentToPassDown }) => {
  return (
    <>
     {componentToPassDown}
    </>
  )
}

原文由 Wide Awake 发布，翻译遵循 CC BY-SA 4.0 许可协议