我将用一个例子来解释我所寻找的功能。
我希望的是父组件能够拦截GrandParent中设置的props.parentClassName并进行更改,如果它不存在就创建它。
为了使按钮接收到正确的parentClassName,我必须创建一个自定义的Button组件,只从父组件接收props,像这样:
我希望如果可能的话,避免这种情况发生,因为这会剥离掉我想在声明初始组件时可见的代码。
所以,我想要这样:
const Grandparent = React.createClass({
render: function(){
return (<div>
<Parent>
<button className={this.props.parentClassName} />
</Parent>
<div>
)
}
});
const Parent = React.createClass({
render: function(){
const childrenWithProps = React.Children.map(this.props.children, (child) => {
return React.cloneElement(child, {parentClassName: 'Murphy'});
});
return (<div>
{childrenWithProps}
</div>)
}
});
我希望的是父组件能够拦截GrandParent中设置的props.parentClassName并进行更改,如果它不存在就创建它。
为了使按钮接收到正确的parentClassName,我必须创建一个自定义的Button组件,只从父组件接收props,像这样:
React.createClass({
render: function(){
return (<button className={this.props.parentClassName} />)
}
});
我希望如果可能的话,避免这种情况发生,因为这会剥离掉我想在声明初始组件时可见的代码。
所以,我想要这样:
React.createClass({
render: function(){
return (<div>
<Parent>
<button className={
//From Parent Component and not the GrandParent Component
this.props.parentClassName
} />
</Parent>
<div>
)
}
});
不要这样做
React.createClass({
render: function(){
return (<div>
<Parent>
<Button />
</Parent>
<div>
)
}
});
const Button = React.createClass({
render: function(){
return (<button className={this.props.parentClassName} />)
}
});
props.parentClassName 是从 <Parent>
组件中返回的,而不是从 <GrandParent>
组件中返回的。