我试图传递一个包装组件作为道具。在React中,这样的事情在技术上是可能的吗?
import React, {Component, PropTypes} from 'react';
import ChildComp from './child-comp';
class Comp extends Component {
render() {
const { Wrapper } = this.props;
return (
<Wrapper>
<ChildComp />
</Wrapper>
);
}
}
Comp.propTypes = {};
export default Comp;
https://codepen.io/keshav1706/pen/eWMZwL?editors=0010
这里有一个简单解决方案的代码。'
class ComponentOne extends React.Component {
render() {
return(
<div>
<h1>Component One</h1>
<div>{this.props.children}</div>
</div>
)
}
}
class ComponentTwo extends React.Component {
render() {
return(
<h4>hello</h4>
)
}
}
class ComponentThree extends React.Component {
render() {
return(
<h4>component three</h4>
)
}
}
ReactDOM.render(
<div>
<ComponentOne> <ComponentThree/></ComponentOne>
</div>,
document.getElementById('root')
);
`
可以通过多种方式包装组件。然而,最常见的是:
呈现子对象时,jsx显式使用包装组件:
<Wrapper>
<Child />
</Wrapper>
而包装器
组件如下所示:
export default class Wrapper extends Component {
render() {
return (
<div>
{ this.props.children }
</div>
);
}
}
高阶组件(HOC)是一种在不必更改jsx标记的情况下混合功能的方法。您可以更改jsx,但也可以在不更改jsx的情况下混合功能。
使用HOC看起来像这样:
const Wrapped = Wrapper(Child);
...
<Wrapped />
而HOC本身看起来就像:
export default Child => class extends Component {
render() {
return (
<div>
<Child />
</div>
);
}
}
是的,完全可以,而且常用。唯一的问题是,作为一种惯例,在JSX中大写的单词意味着用户定义的组件,所以您需要将您的属性小写,并且您必须将用于保存组件引用的变量大写。
import React from 'react';
function HelloWorld () {
return (
<span>
<Foo wrapper={Bar}/>
<Foo wrapper="h5"/>
</span>
);
}
class Bar extends React.Component {
render() {
return <h1>{this.props.children}</h1>
}
}
class Foo extends React.Component {
render() {
// the variable name must be capitalized
const Wrapper = this.props.wrapper;
return (
<Wrapper><p>This works!</p></Wrapper>
);
}
}
对于本地组件,您可以传递一个String,就像这样:
问题内容: 可以说我有: 在Tabs组件内部,具有属性 儿童[0](this.props.children)看起来像 儿童[0]。道具看起来像 最终,Children对象看起来像(这是我想要传递的): 问题是这样,如果我这样重写MultiTab 在选项卡组件内部 看起来和上面一样。 好像 我希望该物业看起来像。上面只是打印出Statement函数。 这是一个很奇怪的问题,但是长话短说,我正在使用一
我使用的是dev-express中的react-grid库,库中有一个表组件,我们可以向它传递单元格组件,在CustomCell中,我使用的是Material UI中的菜单 在上述情况下,菜单工作良好, 但是我想要传递道具到这个组件,我尝试了以下操作 在这种情况下菜单不工作,我想知道是否有一个替代的方法来实现第二种情况。
我正在使用react语义ui模态对象。打开模态的对象是一个道具。 我想在另一个组件中嵌入模态: 如何传递JSX代码(
问题内容: 如何在不暴露URL的情况下将prop与组件一起传递? 这样吗?我正在使用。 问题答案: 您可以这样传递数据: 这是您可以访问的方式: 该API文档解释了如何通过状态和其他变量重定向/历史道具。 来源:https : //github.com/ReactTraining/react-router/blob/master/packages/react- router/docs/api/Re
嘿,伙计们,我正在尝试从父级向子级组件传递道具中的命令。问题是,在我的按钮被点击后,父组件中的一个状态必须被改变,以打开预期的侧栏。我似乎对onClick函数末尾的.then()部分没有把握,因为我得到了错误:×未处理的拒绝(TypeError):无法读取未定义的属性“then” 子组件: 父组件:
也许有一种方法可以将组件绑定到事件? 在使用React一年多后,在Sebastien Lorber的回答的激励下,我得出结论,将子组件作为参数传递给父母中的函数实际上不是React的方式,也不是一个好主意。我换了答案。