最早的时候，antd 的 Table 用起来是这样的：

const columns = [  { dataIndex: 'name', title: 'Name' },  { dataIndex: 'age', title: 'Age' },  { dataIndex: 'address', title: 'Address' }]
    

只要把列定义和数据传给 Table 组件，它就会帮你把表格渲染出来。我们简单实现一下上面的 Table 组件：

class Table extends React.Component {  render() {    const { columns, data } = this.props;    return (      
    
                   {columns.map(col =>              
            )}          
                {data.map(item => (            
                     {columns.map(col =>                
              )}            
          ))}        
             
                
       
{col.title}
      
             
             
      
       
{item[col.dataIndex]}
      
     
          
    );  }}

后来，有人就觉得这样写不够 React 啊，我想要用 JSX 来定义列啊。

好吧，那我们把上面的 Table 改造一下，允许用 JSX 的方式。

const Column = () => {};class Table extends React.Component {  static Column = Column;  render() {    const { children, columns, data } = this.props;    this.columns = columns || React.Children.map(children, (child) => ({      dataIndex: child.props.dataIndex,      title: child.props.title,    }))    return (      
    
                   {this.columns.map(col =>              
            )}          
                {data.map(item => (            
                     {this.columns.map(col =>                
              )}            
          ))}        
             
                
       
{col.title}
      
             
             
      
       
{item[col.dataIndex]}
      
     
          
    );  }}

这里我们定义了一个什么都不干的 Column 组件，然后 Table 组件通过遍历自己的子元素来把列信息读出来。这样就实现 issue 里要求的功能，非常简单。

可是，过了段时间，又有人不满意了。

既然现在支持 JSX 的方式定义列了，那我就想封装自己的 XxxColumn 组件啊。但是从我们上面的实现可以看到，Table 是直接从自己的子元素上读取列信息的，现在如果 Column 组件被封装起来，我们就读不到 Column 上的信息了。

这个问题，一直没有很好的解法。但是，就在昨天，随着 React 16.1 的发布，React Team 还发布了两个实验性的包 react-reconciler 和 react-call-return。其中 react-reconciler 用来实现自定义的 renderer，此处暂且不表。而 react-call-return 这个初看名字完全不知道什么东西的包，就可以解决上面的问题。

react-call-return 提供了两个方法 unstable_createReturn 和 unstable_createCall。

我们先来用这两个方法重新实现一下上面的 Table 组件，再来看我们的问题是怎么被解决的。

const Column = (props) => unstable_createReturn(props);class Table extends React.Component {  static Column = Column;  render() {    const { children, data } = this.props;    return (      
    
                   {unstable_createCall(children, (props, columns) => (              columns.map(col => (                
              ))            ), this.props)}          
                {data.map(item => (            
                     {unstable_createCall(children, (props, columns) => (                columns.map(col => (                  
                ))              ), this.props)}            
          ))}        
             
                
       
{col.title}
      
             
             
      
       
{item[col.dataIndex]}
      
     
          
    );  }}

可以看到，Column 组件不再什么都不做了，它用 unstable_createReturn 创建了一个 return，return 的内容，就是它自己的 props。然后我们在 Table 里调用 unstable_createCall， 这个方法的第一个参数是 Table 的子元素，第二个参数是一个 handler 方法，，第三个参数是 Table 的 props。因为 Table 的子元素，也就是 Column 返回了一个 return，所以当我们 call 这些 return 的时候，React 会把 Column return 的结果传给我们的 handler 方法，大概就是这个过程 handler(props, children.map((c => c.call() )))。这样我们就拿到了 Column 上的 props ，即使 Column 被封装起来了也不会有问题。

react-call-return 的出现，让我们在组件设计上有了更多的可能性，JSX 不再需要映射 DOM，而是可以直接来表达数据。

以上所有演示代码，可以在这里找到