如何导出{this.props.price * this.state.quantity}的值供其他React组件使用？

RecCard组件内部的this.props.price * this.state.quantity是私有计算值，要让其他组件能使用，常用以下几种方式：

方案1：状态提升到父组件 #

这是React组件间共享数据最基础的方式——把quantity的管理从RecCard移到父组件，父组件可以直接计算总价，再把数据传递给需要的组件。

修改后的RecCard组件：

import React, { Component } from 'react';
import { dumpLogs } from './Utils.js';

class RecCard extends Component {
  render() {
    const { title, price, quantity, incrementNumber, decrementNumber } = this.props;
    dumpLogs(this.props);
    return (
      <div>
        <h3>{title}</h3>
        <h5>{price} PLN</h5>
        <span>{quantity}</span> &nbsp; 
        <span className='hidden'>{price * quantity}</span> 
        <button onClick={incrementNumber}>+</button>
        <button onClick={decrementNumber} disabled={quantity <= null}>-</button>
      </div>
    );
  }
}

export default RecCard;

父组件示例（比如App.js）：

import React, { Component } from 'react';
import RecCard from './RecCard';
import OtherComponent from './OtherComponent'; // 需要使用总价的其他组件

class App extends Component {
  state = {
    quantity: null,
    cardPrice: 100 // 假设这是商品单价
  };

  incrementNumber = () => {
    this.setState(prevState => ({
      quantity: prevState.quantity + 1
    }));
  };

  decrementNumber = () => {
    this.setState(prevState => ({
      quantity: prevState.quantity - 1
    }));
  };

  render() {
    const totalPrice = this.state.cardPrice * this.state.quantity;
    return (
      <div>
        <RecCard 
          title="商品标题"
          price={this.state.cardPrice}
          quantity={this.state.quantity}
          incrementNumber={this.incrementNumber}
          decrementNumber={this.decrementNumber}
        />
        {/* 将总价传给其他组件 */}
        <OtherComponent totalPrice={totalPrice} />
      </div>
    );
  }
}

export default App;

方案2：通过回调函数传递计算值 #

如果不想迁移状态，可以让父组件传一个回调函数给RecCard，每当quantity变化时，RecCard调用这个函数把计算后的总价传出去，父组件接收后再转发给其他组件。

修改后的RecCard组件：

import React, { Component } from 'react';
import { dumpLogs } from './Utils.js';

class RecCard extends Component {
  state = {
    quantity: null
  };

  incrementNumber = () => {
    this.setState(prevState => {
      const newQuantity = prevState.quantity + 1;
      // 调用父组件的回调，传递计算后的总价
      this.props.onTotalChange(this.props.price * newQuantity);
      return { quantity: newQuantity };
    });
  };

  decrementNumber = () => {
    this.setState(prevState => {
      const newQuantity = prevState.quantity - 1;
      this.props.onTotalChange(this.props.price * newQuantity);
      return { quantity: newQuantity };
    });
  };

  render() {
    const totalPrice = this.props.price * this.state.quantity;
    dumpLogs(this.props);
    return (
      <div>
        <h3>{this.props.title}</h3>
        <h5>{this.props.price} PLN</h5>
        <span>{this.state.quantity}</span> &nbsp; 
        <span className='hidden'>{totalPrice}</span> 
        <button onClick={this.incrementNumber}>+</button>
        <button onClick={this.decrementNumber} disabled={this.state.quantity <= null}>-</button>
      </div>
    );
  }
}

export default RecCard;

父组件示例：

import React, { Component } from 'react';
import RecCard from './RecCard';
import OtherComponent from './OtherComponent';

class App extends Component {
  state = {
    totalPrice: null
  };

  handleTotalChange = (total) => {
    this.setState({ totalPrice: total });
  };

  render() {
    return (
      <div>
        <RecCard 
          title="商品标题"
          price={100}
          onTotalChange={this.handleTotalChange}
        />
        <OtherComponent totalPrice={this.state.totalPrice} />
      </div>
    );
  }
}

export default App;

方案3：使用全局状态管理库（适合复杂应用） #

如果应用中有多个组件需要共享这类数据，可以用Redux、Zustand、Jotai等状态管理工具，把状态放到全局store里，所有组件都能直接访问。

以Zustand为例，先安装依赖：

npm install zustand

创建全局store（store.js）：

import { create } from 'zustand';

export const useStore = create((set) => ({
  quantity: null,
  price: 100,
  incrementQuantity: () => set(prev => ({ quantity: prev.quantity + 1 })),
  decrementQuantity: () => set(prev => ({ quantity: prev.quantity - 1 }))
}));

修改RecCard组件（类组件需用HOC包装）：

import React, { Component } from 'react';
import { dumpLogs } from './Utils.js';
import { useStore } from './store';
import { withZustand } from 'zustand/react';

class RecCard extends Component {
  render() {
    const { title } = this.props;
    const { price, quantity, incrementQuantity, decrementQuantity } = this.props.store;
    const totalPrice = price * quantity;
    dumpLogs(this.props);
    return (
      <div>
        <h3>{title}</h3>
        <h5>{price} PLN</h5>
        <span>{quantity}</span> &nbsp; 
        <span className='hidden'>{totalPrice}</span> 
        <button onClick={incrementQuantity}>+</button>
        <button onClick={decrementQuantity} disabled={quantity <= null}>-</button>
      </div>
    );
  }
}

export default withZustand(RecCard, useStore);

其他组件直接获取总价：

import React from 'react';
import { useStore } from './store';

const OtherComponent = () => {
  const { price, quantity } = useStore();
  const totalPrice = price * quantity;
  return <div>总价：{totalPrice} PLN</div>;
};

export default OtherComponent;

内容的提问来源于stack exchange，提问作者Tomasz Wyszomirski