React中在自定义Modal组件内传递Button组件Props的语法问题

首先注意拼写：你定义的Prop是buttonAdditionalProps，但示例里写成了buttonAddionalProp（少了一个d），这是第一个要修正的点。

正确传递方式 #

因为buttonAdditionalProps的类型是ButtonProps，本质是Button组件接收的props集合，所以直接传递一个包含对应属性的对象即可，不需要嵌套Button相关结构：

示例1：传递禁用状态

<Modal
  id="123"
  primaryAction={handleClose}
  buttonAdditionalProps={{ disabled: true }}
></Modal>

示例2：同时传递禁用状态和尺寸

<Modal
  id="123"
  primaryAction={handleClose}
  buttonAdditionalProps={{ disabled: true, size: 'large' }}
></Modal>

示例3：根据变量动态控制

如果禁用状态由某个变量控制：

const isDisabled = true;

<Modal
  id="123"
  primaryAction={handleClose}
  buttonAdditionalProps={{ disabled: isDisabled }}
></Modal>

Modal组件内部的使用方式 #

在Modal组件里，需要把buttonAdditionalProps展开传递给内部的Button组件，才能将这些属性应用到按钮上：

// Modal组件内部代码
import Button from './Button';

const Modal = ({ id, primaryAction, buttonAdditionalProps }) => {
  return (
    <div className="modal">
      {/* 其他Modal内容 */}
      <Button
        onClick={primaryAction}
        {...buttonAdditionalProps} // 展开传递额外的Button props
      >
        确认
      </Button>
    </div>
  );
};

你之前写法错误的原因 #

你尝试的buttonAddionalProp = {Button={disabled = {true}}}这类写法是错误的，因为buttonAdditionalProps需要的是Button组件的props对象，不是嵌套一个Button相关结构。直接传入符合ButtonProps类型的键值对对象即可。

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