剛開始沒(méi)看明白，以為講的是業(yè)務(wù)組件的事情。去搜了文章看才明白怎么回事。

文章來(lái)自知乎，題主以后類似問(wèn)題可以在題目中注明
https://zhuanlan.zhihu.com/p/...

這篇文章講的是組件庫(kù)的設(shè)計(jì)，全文有一個(gè)很明確的觀點(diǎn)，即組件庫(kù)應(yīng)該給使用者足夠高的自由度，以避免組件與外部的耦合，提高組件的靈活性。紅圈這里的回調(diào)并不是指一般意義上的請(qǐng)求或者事件的回調(diào)函數(shù)，而是指組件渲染的回調(diào)函數(shù)，通常組件提供這類回調(diào)時(shí)為了讓使用者聲明組件具體的渲染方式，以及數(shù)據(jù)的處理邏輯。

有一個(gè)很好的例子是antd的Table組件，該組件提供了一個(gè)展開單行表格的功能。這里展開的內(nèi)容就是通過(guò)回調(diào)函數(shù)來(lái)聲明的?；卣{(diào)函數(shù)提供每一行的數(shù)據(jù)（即紅圈處整個(gè)對(duì)象），由使用者負(fù)責(zé)處理數(shù)據(jù)，并返回一個(gè)DOM結(jié)構(gòu)。組件在實(shí)際渲染時(shí)，會(huì)循環(huán)調(diào)用這個(gè)回調(diào)函數(shù)，將返回的DOM結(jié)構(gòu)作為展開行的實(shí)際內(nèi)容渲染。

如此一來(lái)，antd并不關(guān)心你傳入數(shù)據(jù)的結(jié)構(gòu)或者屬性名，因此實(shí)現(xiàn)了和后端，也就是數(shù)據(jù)源的解耦

import { Table } from 'antd';

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  { title: 'Action', dataIndex: '', key: 'x', render: () => <a href="#">Delete</a> },
];

const data = [
  { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },
  { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },
  { key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },
];

ReactDOM.render(
  <Table
    columns={columns}
    expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
    dataSource={data}
  />
, mountNode);

可展開的組件