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>
);

在标签组件内，this.props具有属性

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

儿童[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

儿童[0]。支持看起来像

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

最后，儿童对象看起来像（这是我想传递的）：

$$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

这是一个奇怪的问题，但是长篇故事我正在使用一个库，这就是它的归宿。

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>

当您直接将组件作为参数传递时，您可以通过未实例化的方式传递它，并通过从props中检索它来实例化它。这是传递组件类的惯用方法，然后组件类将由树下的组件实例化（例如，如果组件在标签上使用自定义样式，但它希望让消费者选择该标签是否为{{1} }或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}/>

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

Answer 2

如已接受的答案所述-您可以使用特殊的{props.children}属性。但是-您可以按照标题要求将组件作为道具传递。我认为这有时比较干净，因为您可能希望传递多个组件并将它们渲染在不同的位置。这是带有示例操作的React文档：

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

请确保您实际上是在传递组件而不是对象（这最初使我绊倒了）。

代码就是这样：

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

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

Answer 3

就我而言，我将一些组件（type_of_FunctionComponent）堆叠到一个对象中，例如：

[
 {...,one : ComponentOne},
 {...,two : ComponentTwo}
]

然后我将它传递给一个动画滑块，在幻灯片组件中，我做到了：

const PassedComponent:FunctionComponent<any> = Passed;

然后使用它：

<PassedComponent {...custom_props} />

将反应组件作为道具传递

3 个答案: