[英]Is it possible to achieve something like HOC with classes - without classes in React?
I want to do something like: 我想做类似的事情:
<SomeProvider showConfirm={showConfirm}>
{props.showConfirm()
? (<confirmActionComponent />)
: (<chooseActionComponent />)}
</SomeProvider>
Inside of chooseActionComponent
I want to be able to access showConfirm
or another value in a deep nested child component to update some value in the parent and have confirmActionComponent
show. 在
chooseActionComponent
内部,我希望能够访问showConfirm
或深度嵌套的子组件中的另一个值,以更新父组件中的某些值并显示confirmActionComponent
。
I know how to achieve this using class
which tends to involve this
and bind
at some point, and I would prefer to avoid that. 我知道如何使用倾向于涉及到
this
并在某些时候bind
class
来实现这一点,我宁愿避免这种情况。
Is there any way to accomplish something like this using pure functions/components instead? 有没有办法使用纯函数/组件来完成类似的事情? Would also prefer to keep this out of Redux store.
还希望将其保留在Redux商店之外。
If you just want to access showConfirm
, you simply can pass it to the child: 如果只想访问
showConfirm
,则可以将其传递给子级:
<SomeProvider showConfirm={showConfirm}>
{props.showConfirm()
? (<confirmActionComponent />)
: (<chooseActionComponent showConfirm={showConfirm} />)}
</SomeProvider>
Note following quote from React docs to inheritance: 请注意以下从React文档引用到继承的引用:
At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
在Facebook,我们在成千上万的组件中使用React,但还没有找到建议创建组件继承层次结构的用例。
Anyway, I maybe have a really really dirty hack for you... use ref
... 无论如何,我可能会对您有一个非常肮脏的技巧...使用
ref
...
const Child = () =>
<div ref={(self) => {
// get ReactDOMNode on stateless component
const ReactDOMNode = self[Object.keys(self).filter((key) =>
/__reactInternalInstance/g.test(key))[0]];
// access parent props
console.dir(ReactDOMNode
._hostParent
._currentElement
._owner
._currentElement
.props);
}}></div>;
Note: that this is not recommended and I won't recommend that, too. 注意:不建议这样做,我也不建议这样做。 I would advice you to simply pass needed parent props to the child.
我建议您简单地将所需的父母道具传递给孩子。
<SomeProvider showConfirm={showConfirm}>
{props.showConfirm()
? (<confirmActionComponent />)
: (<chooseActionComponent showConfirm={showConfirm} />)}
</SomeProvider>
And in your chooseActionComponent
you can: 在您的
chooseActionComponent
您可以:
const chooseActionComponent = ({parentProps: {showConfirm}}) =>
<div>{showConfirm}</div>;
You do not have to use ES6 classes to create React content. 您不必使用ES6类来创建React内容。 If you would like to avoid having to repeatedly use
bind
to ensure correct scoping of methods (that use this.setState
/ this.props
), you can revert back to using the React API helper functions ( see React without ES6 ). 如果您希望避免重复使用
bind
来确保方法的正确作用域(使用this.setState
/ this.props
),则可以恢复使用React API帮助器函数 ( 请参阅不带ES6的React )。
You can specifically use: React.createClass for creating React classes and HOCs. 您可以专门使用: React.createClass用于创建React类和HOC 。 Again, just to re-iterate this: using this alternative syntax will autobind
this
for you. 再次,只是再次重申这一点:使用此替代语法会autobind
this
给你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.