将反应组件作为道具传递

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

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

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 对象属性，可以保存任何值——无论是字符串、函数还是复杂对象。

Answer 2

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

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

Answer 4

我必须有条件地渲染组件，所以以下对我有帮助：

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

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {conditionToCheck ? componentToPassDown : <div>Some other code</div>}
    </>
  )
}

Answer 5

如何使用 React 包中的“React.createElement(component, props)”

const showModalScrollable = (component, props) => {
 Navigation.showModal({
   component: {
     name: COMPONENT_NAMES.modalScrollable,
     passProps: {
        renderContent: (componentId) => {
          const allProps = { componentId, ...props };

          return React.createElement(component, allProps);
    },
  },
},

}); };