如何从 ReactJS 中渲染的组件中提取值？

Question

我是 React 新手，我刚刚开始了一个新项目来学习它。目前我被困在如何从另一个组件呈现的组件中精确计算值。我将给出一个示例代码来更好地解释自己。

假设我已经构建了组件水果和蔬菜，它们每个都有

this.state = {
   price: 0,
}

以后

this.setState({price:/*randomly generated positive integer*/})

我尝试将它们封装在一个名为 Base 的新组件中。在 Base 的 render() 函数中，我有：

render() {
    return (
    <>
        <Fruit></Fruit>
        <Vegetables></Vegetables>
        <button onClick={() => this.add()}>Add Prices!</button>
    </>
    )
}

其中 add() 函数旨在添加先前呈现的水果和蔬菜价格的价格。我尝试为它们分配一个 id 并使用 DOM 来获取它们的值，但我无法访问它们的 this.state。有没有办法实现这一点，或者，在 React 中这样做的常见做法是什么？提前感谢您的任何指导！

Answer 1

好吧，根据定义，您不应该能够在组件之外修改 React 的组件状态。 （从父母我认为没有办法afaik。但如果你想从孩子更新，你可以通过道具传递一个函数，从父母到孩子，更新父母的状态）。

解决这个问题的简单方法是在Base 组件的状态中定义价格，然后在 Base 组件中添加函数将更新 Base 状态。你可以通过道具将价格传递给水果和蔬菜。

类似的东西：

function Base() {
    const [prices, setPrices] = useState({
        fruit: 20,
        vegetable: 10,
    });

    const add = () => {
        setPrices({
            fruit: prices.fruit + 10,
            vegetable: prices.vegetable + 15
        });
    }

    return (<>
        <Fruit price={prices.fruit}></Fruit>
        <Vegetables price={prices.vegetable}></Vegetables>
        <button onClick={() => this.add()}>Add Prices!</button>
    </>);
}

function Fruit({price})
{
//----
}

function Vegetable({price})
{
//.....
}

但是，在复杂的应用程序中，通过 N 个子节点传递 props 会变得乏味。将来当您的应用程序增长时，您可能希望查看 React Contexts。 https://reactjs.org/docs/context.html

Answer 2

一种常见的做法是在主组件中定义价格，然后将这些价格作为道具传递给其子组件。

否则，您可以使用 Redux 之类的状态管理库从应用程序中的任何位置访问状态（对于这种简单的情况来说，这太过分了）