javascript - 如何在 React 类渲染后使用自定义函数？

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

这并不是 React 真正应该使用的方式。
你想要做的事情看起来像 MVC，而 React 是完全不同的事情。

• 像 <Cart> 这样的 React 组件从其父组件接收 props(可能是根 reactDOM.render() 或其他 React 组件)
• React 组件可能有内部和私有(private)方法来从其他地方检索附加数据(但不能从其他 React 组件)
• 有了这些输入(并且只有这些输入)，组件知道什么以及如何渲染自身，也可能将子组件渲染到 DOM
• 组件(或其子组件)渲染的内容可能包括交互处理程序(例如从购物车按钮中删除，如`
• 这些交互可能会触发组件内的内部方法
• 如果内部方法作为 prop 传递下来，则可以调用父组件中的方法。
• 或调用一些远程函数从服务器端的购物车中删除商品。

用 react 术语来说，<Cart> 组件不是购物车内容的所有者。它将它们作为 Prop 获取，或者从其他地方检索它们。
React确实希望您仅通过将一组新的 Prop 传递给要渲染的组件来更新购物车。

您可以尝试通过尝试将组件中的任何方法暴露给外界来缩短 react 设计的捷径，但这违背了 react 设计原则。
React 有一种单向数据流:组件获取 props，然后渲染。

作为引用，我可以推荐react原理上的this page。