React不同类组件间如何传递组件内部定义的const常量？

根据两个组件的层级关系，有以下几种可行的实现方式：

1. 父子组件直接传Props #

如果Component2是Component1的直接子组件，直接将计算好的allFactsSliced通过Props传递即可，这是最简单的方案：

Component1 调整后代码 #

class Component1 extends React.Component {
  // 原有逻辑保持不变
  render() {
    const {allFacts, currentPage, factsPerPage } = this.state
    const indexOfLastFact = currentPage * factsPerPage
    const indexOfFirstFact = indexOfLastFact - factsPerPage
    const allFactsSliced = allFacts.slice(indexOfFirstFact, indexOfLastFact)

    return (
      <div>
        {/* 原有渲染内容 */}
        <Component2 allFactsSliced={allFactsSliced} />
      </div>
    )
  }
}
export default Component1

Component2 调整后代码 #

class Component2 extends React.Component {
  // 原有逻辑保持不变
  render() {
    // 从Props中取常量即可
    const { allFactsSliced } = this.props
    const renderAllFacts = 
        this.state.isLoading ? <div id="loading">///</div> :
        allFactsSliced.map((fact, index) => {
          return <div>Fact # {index +1}: <br/> {fact.fact}</div>
        })
    // 原有渲染逻辑
  }
}

2. 非父子组件方案 #

如果两个组件不是直接父子关系，可选以下两种方案：

• 状态提升：将allFacts、currentPage、factsPerPage三个状态提升到两个组件的公共父组件中存储，在父组件内计算得到allFactsSliced后，再分别传递给两个子组件使用。
• Context/状态管理库：如果组件层级过深，可使用React自带的Context API，或者Redux、MobX等状态管理工具，将相关状态/计算好的常量存入全局上下文，两个组件可直接取用。

3. 公共计算逻辑抽离 #

不管用哪种传值方案，都可以把分页切片的逻辑单独抽成公共工具函数，避免两个组件重复写计算逻辑，也方便后续统一修改规则：

// 单独存入公共工具文件，比如 src/utils/common.js
export const getSlicedFacts = (allFacts, currentPage, factsPerPage) => {
  const indexOfLastFact = currentPage * factsPerPage;
  const indexOfFirstFact = indexOfLastFact - factsPerPage;
  return allFacts.slice(indexOfFirstFact, indexOfLastFact);
}

需要使用的组件直接导入函数，传入对应参数即可得到计算结果。

• 直接跨组件访问另一个组件的内部常量不符合React开发最佳实践：React组件的内部状态、内部定义的变量都是私有的，外部直接访问会破坏组件的封装性，后续迭代修改Component1的逻辑时，很容易导致Component2出现隐性故障，排查成本极高。
• 你的组件拆分需求是合理的，不需要把所有逻辑堆在同一个组件里：只要遵循React单向数据流的规则，通过Props、状态提升、Context等官方提供的标准方式进行组件通信，拆分组件反而会提升代码的可维护性和复用性。

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