Question

我想做类似的事情：

+------+----------+-------------+
| Year |  Animal  | Coming from |
+------+----------+-------------+
| 2000 | bear     | netherlands |
| 2001 | ant      | netherlands |
| 2001 | spider   | netherlands |
| 2002 | dog      | poland      |
| 2003 | dinosaur | swiss       |
| 2004 | ant      | austria     |
| 2005 | bear     | poland      |
| 2006 | ant      | austria     |
| 2007 | spider   | belgium     |
| 2007 | cat      | luxembourg  |
| 2008 | fish     | belgium     |
| 2008 | ant      | poland      |
| 2009 | dog      | poland      |
| 2010 | dog      | netherlands |
+------+----------+-------------+

在<SomeProvider showConfirm={showConfirm}> {props.showConfirm() ? (<confirmActionComponent />) : (<chooseActionComponent />)} </SomeProvider>内部，我希望能够访问深层嵌套子组件中的chooseActionComponent或其他值，以更新父级中的某些值并显示showConfirm。

我知道如何使用confirmActionComponent来实现此目标，这在某些时候往往涉及class和this，我宁愿避免这种情况。

有没有办法用纯函数/组件来完成这样的事情呢？也希望将其保留在Redux商店之外。

Answer 1

如果您只想访问showConfirm，您只需将其传递给孩子：

<SomeProvider showConfirm={showConfirm}>
    {props.showConfirm()
    ? (<confirmActionComponent />)
    : (<chooseActionComponent showConfirm={showConfirm} />)}
</SomeProvider>

请注意从React docs到继承的引用：

在Facebook，我们在数千个组件中使用React，而且我们还没有找到任何建议创建组件继承层次结构的用例。

无论如何，我可能对你有一个非常脏的黑客...... 使用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>;

注意：不建议这样做，我也不推荐这样做。我建议你简单地将所需的父道具传递给孩子。

<SomeProvider showConfirm={showConfirm}>
    {props.showConfirm()
    ? (<confirmActionComponent />)
    : (<chooseActionComponent showConfirm={showConfirm} />)}
</SomeProvider>

在chooseActionComponent你可以：

const chooseActionComponent = ({parentProps: {showConfirm}}) =>
    <div>{showConfirm}</div>;

Answer 2

您不必使用ES6类来创建React内容。如果您希望避免重复使用bind以确保正确确定方法的范围（使用this.setState / this.props），您可以恢复使用React API帮助程序功能（github）。

您可以专门使用：see React without ES6来创建React类和HOC。再次，只是为了重复这一点：使用这种替代语法将 autobind this。

是否有可能通过类实现类似HOC的东西 - 在React中没有类？

2 个答案: