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

Question

我是 React 的新手，我刚刚开始了一个新项目来学习它。目前，我一直在研究如何从另一个组件呈现的组件中提取值。我会给出一个示例代码来更好地解释我自己。

假设我构建了 Fruit 和 Vegetables 组件，它们每个都有

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

一种常见的做法是在您的主要组件中定义价格，然后将这些价格作为属性传递给它的子组件。

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

Answer 2

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

克服这个问题的简单方法是在 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 个 children 传递道具会变得乏味。将来当你的应用程序增长时，你可能想看看 React Contexts。 https://reactjs.org/docs/context.html

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

How to extract values from components that have been rendered in ReactJS?

javascript

reactjs

react-component