将反应组件作为道具传递

javascript reactjs

2022-08-30 02:21:07

假设我有：

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

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

这是一个奇怪的问题，但长话说我正在使用一个库，这就是它归结为什么。

答案 1

使用是将实例化组件传递给 react 组件的惯用方法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 中检索它来实例化它。这是一种传递组件类的惯用方式，然后组件类将按照树进行实例化（例如，如果组件在标记上使用自定义样式，但它希望让使用者选择该标记是 or ）：divspan

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}/>

如果你想做的是传递一个类似子的参数作为 prop，你可以这样做：

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

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

答案 2

如接受的答案中所述 - 您可以使用特殊的 { props.children } 属性。但是 - 您可以在标题请求时将组件作为 prop 传递。我认为这有时更干净，因为您可能希望传递多个组件并让它们在不同的地方渲染。以下是 react 文档，其中包含如何执行此操作的示例：

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

确保你实际上是在传递一个组件而不是一个对象（这最初让我绊倒了）。

代码很简单：

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

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