可以说我有:
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"
儿童[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"
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>;
在选项卡组件内部
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
这是一个很奇怪的问题,但是长话短说,我正在使用一个库,这就是它的含义。
使用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检索它来实例化它。这是一种传递组件类的惯用方式,然后由组件沿树实例化(例如,如果组件在标签上使用自定义样式,但它希望让使用者选择该标签是a
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对象属性,可以保存任何值-可以是字符串,函数或复杂对象。
我正在使用react语义ui模态对象。打开模态的对象是一个道具。 我想在另一个组件中嵌入模态: 如何传递JSX代码(
我使用的是dev-express中的react-grid库,库中有一个表组件,我们可以向它传递单元格组件,在CustomCell中,我使用的是Material UI中的菜单 在上述情况下,菜单工作良好, 但是我想要传递道具到这个组件,我尝试了以下操作 在这种情况下菜单不工作,我想知道是否有一个替代的方法来实现第二种情况。
问题内容: 我需要使用路由器将道具传递到组件。这是我的代码: 如您所见,isAuthenticated我想传递给Login组件的道具。 当我登录道具时, isAuthenticated 道具不存在。我做错了什么?如何正确通过道具?我关注了文档以及其他讨论。据我了解,它应该可以工作。的版本 做出反应路由器 和 反应路由器- DOM 是 4.0.0 问题答案: 像这样传递它: 它应该在“登录组件”中可
在Tabs组件中,具有以下属性 儿童[0](this.props.children)将看起来像 孩子[0]。道具看起来像 我希望属性如下所示。上面只是打印出语句函数。 这是一个奇怪的问题,但说来话长,我正在使用一个库,这就是它的结论。
我试图传递一个包装组件作为道具。在React中,这样的事情在技术上是可能的吗?
问题内容: 我使用React Router的React.js应用程序具有以下结构: 我想将一些属性传递给组件。 (通常我会这样做) 用React Router做到这一点最简单,正确的方法是什么? 问题答案: 更新 自新版本发布以来,无需使用包装器就可以直接通过组件传递道具。例如,通过使用prop。 零件: 用法: 旧版本 我的首选方式是包装组件并将包装器作为路由处理程序传递。 这是您应用了更改的示