關於antd中嵌套表格expandable屬性如何設置為可變化的

ProTable的屬性expandable，它的值是一個對象，這個對象有多個屬性，其中一個是expandedRowRender函數，

這個名已經確定了。

expandable={{expandedRowRender}}

expandedRowRender這個函數名不能換成其它的，否則嵌套表格無法生效。

而當你想把這個渲染的表格設置為可變的話時，把函數放入useState()函數中，作為state的初始變量，會發現這個可變的狀態expandedRowRender是無法生效的。

const [expandedRowRender, setExpandedRowRender]=  useState((record)=>{
	//設置為狀態
	//函數內容
	//可以注入一個record參數，記錄該行的內容
});

只能是設置為非狀態時，嵌套表格才可以生效

const expandedRowRender = () =>{
	//設置為非狀態
	//函數內容
	//生成一個新的內容
};

我假設了，很可能是因為函數名是地址的情況，具體如何影響感覺很復雜，也沒有多想，所以想要設置成可變的，盡量不要是一個可變的狀態函數。

實現方式可以有兩種

• 方法一
  函數里面，return的內容可變

  [expandedRowContent,setExpandedRowContent] = useState(
  <div>這是嵌套表格中的內容</div>
  );
  

  <ProTable
  expandable = {{expandedRowRender: () => expandedContent }}
  />
  

• 方法二
  函數外面，整個對象可變，當然，對象的屬性名expandedRowRender一直保持不變。

  [expandedRow,setExpandedRow] = useState(
  	{
  		expandedRowRender: () =>  <div>這是嵌套表格中的內容</div>
  	}
  );
  

  <ProTable expandable = {expandedRow} />
  

  總體而言，方法二自由度更大，方法一，總是會出現可擴展按鈕，改變的是擴展出的內容。