将反应组件作为道具传递 [英] Pass react component as props

问题描述

假设我有：

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）看起来像

Children[0] (this.props.children) will look like

$$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] .props看起来像

Children[0].props looks like

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

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

Finally Children object looks like (this is what i want to 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

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

The question is this, if I rewrite MultiTab like this

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

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

I want the pass property to look like. Above just prints out the Statement function.

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

这是一个奇怪的问题，但很长的故事我' m使用库，这就是它的结果。

This is a weird question, but long story I'm using a library and this is what it comes down to.

推荐答案

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

Using this.props.children is the idiomatic way to pass instantiated components to a react component

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

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

When you pass a component as a parameter directly, you pass it uninstantiated and instantiate it by retrieving it from the props. This is an idiomatic way of passing down component classes which will then be instantiated by the components down the tree (e.g. if a component uses custom styles on a tag, but it wants to let the consumer choose whether that tag is a div or 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}/>

如果您要做的是传递类似子项的参数作为道具，您可以做那：

If what you want to do is to pass a children-like parameter as a prop, you can do that:

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

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

After all, properties in React are just regular JavaScript object properties and can hold any value - be it a string, function or a complex object.

这篇关于将反应组件作为道具传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！