Javascript 将反应组件作为道具传递

Pass react component as props

提问by chefcurry7

Lets say I have:

可以说我有：

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

Inside the Tabs component, this.propshas the properties

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

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

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

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 looks like

Children[0].props 看起来像

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

Finally Children object looks like (this is what i want to pass):

最后 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

The question is this, if I rewrite MultiTab like this

问题是，如果我像这样重写 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>;

Inside the Tabs component

Tabs 组件内部

this.props.childrenlooks the same as above.

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

children[0].propslooks like

children[0].props好像

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

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

我希望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

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

这是一个奇怪的问题，但说来话长，我正在使用图书馆，这就是归结起来的原因。

回答by Stefan Dragnev

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

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

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

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 divor span):

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

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.

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