React点击按钮后如何正确渲染组件并传递动态内容

现有实现代码 #

初始Sidebar组件代码：

const Sidebar = () => {
  const classes = useStyles()
  const navigate = useNavigate()

  return (
    <Grid container
      className={classes.containerStyling}
      direction="column">
      <Grid item className={classes.gridItemStyling}>
        {insurances.map((item, index) =>
          <Button
            key={index}
            className={classes.buttonListStyling}>
            <Grid container direction="column" className={classes.listItemStyling}>
              <Grid item>
                <Typography variant="h2">
                  {item.headline}
                </Typography>
              </Grid>
            </Grid>
          </Button>)}
      </Grid>
    </Grid>
  )
}

export default Sidebar

已编写的状态控制逻辑：

const [hasRender, setRender] = useState(false);
const onShow = React.useCallback(() => setRender(true), [])

<Button
  key={index}
  className={classes.buttonListStyling}
  onClick={onShow}>
</Button>

已编写的条件渲染逻辑：

{visible && <HeadlineContent/>}

待解决问题 #

• 现有写法下HeadlineContent组件会继承Sidebar内Grid的样式，需要将组件渲染到Grid容器外部，使其正常应用自身独立样式
• 需要获取被点击按钮的对应文本，动态渲染和按钮文本一致的标题内容

解决方案 #

组件脱离Grid样式影响 #

HeadlineContent继承Grid样式的核心原因是组件被写在了Sidebar的Grid容器内部，属于Grid的子节点。直接调整布局层级，将侧边栏和内容区放在平级容器下即可，不需要额外做特殊处理。
如果是常规侧边栏+内容区的左右布局，最外层使用行方向的MUI Grid作为布局容器，左侧放置Sidebar组件，右侧放置内容渲染区，两个节点平级，不存在父级样式继承问题。
如果业务场景要求必须脱离当前DOM树渲染（如浮层、模态框类内容），可以使用MUI内置的Portal组件将内容挂载到指定DOM节点，该场景为侧边栏旁固定内容区，调整布局嵌套是成本最低的方案。
参考布局结构：

{/* 最外层行方向Grid作为页面整体布局容器 */}
<Grid container direction="row" sx={{ width: '100%' }}>
  {/* 左侧侧边栏列，设置固定宽度 */}
  <Grid item sx={{ width: 240 }}>
    <Sidebar onSelectHeadline={(headline) => setActiveHeadline(headline)} />
  </Grid>
  {/* 右侧内容区，和侧边栏平级，不会继承侧边栏内部Grid样式 */}
  <Grid item sx={{ flex: 1, padding: 3 }}>
    {activeHeadline && <HeadlineContent title={activeHeadline} />}
  </Grid>
</Grid>

注意这里需要把选中状态上提到最外层布局组件，不要把状态存在Sidebar组件内部，避免内容区无法访问状态值。

动态传递点击按钮对应文本 #

不要使用布尔值控制渲染状态，直接将状态定义为存储当前选中标题的变量，初始值设为null，点击按钮时直接将遍历得到的当前项标题传入状态更新方法即可，不需要操作DOM获取按钮文本。
修改Sidebar内的遍历逻辑，点击按钮时触发父组件传入的选中回调：

const Sidebar = ({ onSelectHeadline }) => {
  const classes = useStyles()
  const navigate = useNavigate()

  return (
    <Grid container
      className={classes.containerStyling}
      direction="column">
      <Grid item className={classes.gridItemStyling}>
        {insurances.map((item, index) =>
          <Button
            key={index}
            className={classes.buttonListStyling}
            onClick={() => onSelectHeadline(item.headline)}
          >
            <Grid container direction="column" className={classes.listItemStyling}>
              <Grid item>
                <Typography variant="h2">
                  {item.headline}
                </Typography>
              </Grid>
            </Grid>
          </Button>)}
      </Grid>
    </Grid>
  )
}

在最外层布局组件中定义状态：

const [activeHeadline, setActiveHeadline] = useState(null);

状态存在值时自动渲染内容组件，同时将当前选中的标题作为title属性传入HeadlineContent，组件内部直接读取该属性渲染对应标题即可。如果需要实现按钮选中态样式，直接判断当前项标题和activeHeadline是否相等即可，不需要额外存储选中索引。

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