Question

假设我在我的React组件中创建了其他函数，如下所示：

class Cart extends React.Component {
    render() {
       return <div id="cart">My Cart Items</div>
    }
    getItem(id) {
       // magically return the item
    }
    addItem(id, name, type, price){
       // you get the idea
    }
}

现在，从课堂外访问getItem函数的最佳方法是什么？例如，某些内容可以用作window.Cart.getItem。在我看来，这些函数是prototype返回的nodeName属性的ReactDOM.render（未初始化）的一部分。

这是正确的方法吗？感谢。

Answer 1

这不是应该如何使用的反应你想做的事情看起来像MVC，反应是完全不同的事情。

像<Cart>这样的React组件从其父级接收道具（可能是根reactDOM.render()或其他反应组件）
一个React组件可能有内部和私有方法从其他地方检索其他数据（但不是从其他反应组件中检索）
使用这些输入（并且只有这些输入），组件知道什么以及如何呈现自己以及可能还有子组件到DOM
组件（或其子组件）呈现的东西可能包括交互处理程序（例如，从购物车按钮中移除，如`
这些交互可以触发组件内部的内部方法
并且内部方法可以调用父组件中的方法，如果它作为prop传递下去。
或调用某个远程功能从服务器端的购物车中删除项目。

在反应方面，<Cart>组件不是购物车内容的所有者。它将它们作为道具，或从其他地方检索它们 React真的希望你只通过将一组新的道具传递给要渲染的组件来更新购物车。

您可以通过尝试将任何方法从组件暴露给外部世界来尝试快速反应设计，但这违反了反应设计原则。
React有一个单向数据流：一个组件获取道具和渲染。

作为参考，我可以就反应原则推荐this page。

Answer 2

您可以引用该实例：）

<Cart ref={function(instance){ window.CartInstance = instance }} />

window.CartInstance.getItem(foo);

<强> ES6

<Cart ref={(instance)=>window.CartInstance = instance} />

window.CartInstance.getItem(foo);

如何在呈现后在React类中使用自定义函数？

2 个答案: