React开发中如何将一个组件替换为另一个指定组件？

你需要将SomethingB作为静态属性挂载到Box组件上，即可实现Box.SomethingB的调用语法，具体实现如下：

函数组件实现 #

// 定义基础Box组件
const Box = ({ children }) => {
  return <div className="box-container">{children}</div>
}

// 定义SomethingB组件
const SomethingB = () => {
  // 这里写SomethingB的内部逻辑和渲染内容
  return <div className="something-b">对应内容</div>
}

// 将SomethingB挂载为Box的静态属性
Box.SomethingB = SomethingB

类组件实现 #

import React from 'react'

class Box extends React.Component {
  // 直接在类内部声明静态属性
  static SomethingB = () => {
    return <div className="something-b">对应内容</div>
  }

  render() {
    return <div className="box-container">{this.props.children}</div>
  }
}

调用方式 #

完成上述定义后，即可直接使用你需要的语法：

<Box>
  <Box.SomethingB />
</Box>

如果之前项目中已经存在Box.SomethingA，直接将挂载的属性名替换为SomethingB，或者替换属性对应的组件逻辑即可完成替换需求。

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