React Trello自定义Card组件如何传递额外的自定义prop参数

方案1：将自定义字段写入卡片原始数据（推荐，业务属性绑定场景） #

React Trello会自动将卡片的完整原始数据作为prop传递给自定义Card组件，你可以直接在lanes的cards数组中新增自定义字段：

const lanes = [
  {
    id: 'todo',
    title: '待处理',
    cards: [
      {
        id: 'card1',
        title: '完成首页开发',
        // 以下为自定义字段
        priority: 'high',
        assignee: '张三',
        deadline: '2024-06-30'
      }
    ]
  }
]

之后你在TrelloCard组件中可以直接通过props.priority、props.assignee等拿到对应自定义属性，无需额外修改Board组件配置。

方案2：用高阶组件包裹自定义Card（通用场景，传递全局/动态属性） #

如果要传递的是全局配置、事件回调这类和卡片本身数据无关的属性，可以用高阶组件把自定义prop闭包传入：

// 定义要传递的自定义属性，支持动态state
const customProps = {
  userRole: 'admin',
  onTagClick: (tagId) => console.log('点击标签', tagId)
}

// 包裹自定义Card，合并默认prop和自定义prop
const WrappedTrelloCard = (defaultCardProps) => {
  return <TrelloCard {...defaultCardProps} {...customProps} />
}

修改Board的components配置，将Card替换为包装后的组件即可：

<Board
  data={{ lanes }}
  editable={false}
  components={{ NewCardForm: CardForm, Card: WrappedTrelloCard }}
  style={{ background: 'transparent' }}
/>

如果自定义prop是会变化的状态值，建议用useCallback缓存包装组件，避免不必要的重渲染：

const [currentUser, setCurrentUser] = useState({role: 'editor'})

const WrappedTrelloCard = useCallback((defaultProps) => {
  return <TrelloCard {...defaultProps} currentUser={currentUser} />
}, [currentUser])

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