关于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} />
  

  总体而言，方法二自由度更大，方法一，总是会出现可扩展按钮，改变的是扩展出的内容。