将react组件作为props传递

IT技术 javascript reactjs
2021-02-11 07:50:25

可以说我有：

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"
justify="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>;

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

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

5个回答

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

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

当您直接将组件作为参数传递时，您将其未实例化地传递并通过从 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}/>

如果您想要做的是将类似儿童的参数作为props传递，您可以这样做：

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

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

基本上传递一个组件，就像<Com a="5" />把它变成一个箭头函数：() => <Com a="5" />
2021-03-23 07:50:25
我知道你带来了很多很好的箭头函数示例。但是你介意展示一下如果代码被分成不同的文件会是什么样子吗？我对如何使用class和有点困惑export
2021-03-29 07:50:25
提示：确保Inner不是inner. 否则不起作用
2021-04-06 07:50:25
只需使用export const Foo = ...然后在其他地方import {Foo} from "./foo"
2021-04-12 07:50:25

正如接受的答案中所述 - 您可以使用特殊的 { props.children } 属性。但是 - 您可以根据标题请求将组件作为props传递。我认为这有时更清晰，因为您可能希望传递多个组件并将它们呈现在不同的位置。这是react文档以及如何执行此操作的示例：

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

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

代码很简单：

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

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {componentToPassDown}  
    </>
  )
}
我如何componentToPassDown在 chidl 方法中提供道具？
2021-03-17 07:50:25
@HadiPawar 只是传递道具： <Child componentToPassDown={<SomeComp yeet={true} />} />
2021-03-23 07:50:25
如果孩子有一个 prop.how 我如何在父级中访问它。
2021-03-24 07:50:25
@NicoleZ - 基本思想是扭转问题。即，在父级中创建变量并将其作为道具传递给子级。如果您希望孩子更改变量，那么您需要创建一个函数来在父级中执行此操作，并将其作为另一个道具传递。
2021-04-03 07:50:25

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

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

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

const PassedComponent:FunctionComponent<any> = Passed;

然后使用它：

<PassedComponent {...custom_props} />

我必须有条件地渲染组件，因此以下内容对我有帮助：

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

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

如何使用 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);
    },
  },
},

}); };

其它你可能感兴趣的问题
上一篇将 javascript 从资源加载到 UIWebView 下一篇使用 window.location.href 传递发布数据