React入门问题：如何控制Grid隐藏CustomBtn及自定义注入按钮

第一步：调整Grid组件逻辑，支持按钮显隐和自定义 #

首先修改你的Grid组件代码，增加按钮的条件渲染逻辑，同时支持接收自定义按钮作为prop：

function Grid(props) {
    // 新增解构btn、btnTitle参数
    const {icon, title, btn, btnTitle} = props;
    const classes = styles(); 
    return (
        <div className={classes.wrapper}>
            <div className={classes.item}>{icon}</div>
            <Typography textDecorator="bold" className={classes.item} variant="h5">{title}</Typography>
            {/* 增加条件判断：只有传入了自定义btn 或者 btnTitle时才渲染按钮区域 */}
            {(btn || btnTitle) && <div className={classes.item}>
                {/* 优先渲染传入的自定义btn，没有的话用默认CustomBtn，传入btnTitle */}
                {btn ? btn : <CustomBtn title={btnTitle} />}
            </div>}
        </div>
    )
}

问题1 解决方案：不渲染内置CustomBtn #

调整后调用Grid的时候，只要不传btn属性，也不传btnTitle属性，就不会渲染按钮区域，刚好匹配你现有代码里第一个不需要按钮的Grid调用：

// 该调用没有传btn和btnTitle，不会渲染任何按钮
<Grid icon={<SecurityIcon style={{fill: "#4360A6", height:"125", width:"125"}}/>} title="Secure"  />

问题2 解决方案：传入自定义CustomBtn #

你之前的报错是因为传组件的时候没有指定prop名称，正确写法是把自定义按钮作为btn属性的值传入：

<Grid  
  btnTitle="Companies" 
  title="See real-time patient outcomes" 
  btn={<CustomBtn text="hello" color="red"/>}
/>

调整后Grid组件会优先渲染你传入的自定义按钮，不会使用默认的CustomBtn，同时完全兼容你原有代码里其他传btnTitle的Grid调用，不需要额外修改。

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