在Office UI Fabric的DetailsList组件行内添加编辑按钮问题

嘿，我来帮你解决这个问题！你现在遇到的按钮显示在行下方的问题，本质是因为onRenderRow里返回的<div>默认是块级元素，里面的DetailsRow和按钮会垂直堆叠。我给你两种解决方案，一种是快速调整CSS，另一种是更符合Office UI Fabric设计规范的优雅做法：

方案一：快速CSS调整（临时解决） #

你可以把onRenderRow里的容器改成flex布局，让DetailsRow和按钮横向排列。不过要注意，DetailsRow本身是基于表格行的结构，这种方式可能在列调整、响应式场景下出现布局错位，适合快速验证：

onRenderRows = (props) => {
  return (
    <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
      {/* 让DetailsRow占满剩余空间 */}
      <DetailsRow {...props} style={{ flex: 1 }} />
      <PrimaryButton 
        onClick={() => alert(props.item.name)} 
        text='编辑' 
        size='small' // 用小尺寸按钮更贴合行高
      />
    </div>
  )
}

方案二：嵌入现有列（推荐做法） #

Office UI Fabric的DetailsList更推荐通过修改现有列的渲染逻辑来添加操作按钮，这样既能保持组件原生的布局稳定性，又不需要额外增设列。比如你可以把按钮嵌入到某一列（比如最后一列）的内容中：

首先，调整你的列配置，给目标列添加onRenderItemColumn属性：

// 假设你的columns数组是这样的，修改其中一列（比如imo列）
this.state.columns = [
  { key: 'id', name: 'ID', fieldName: 'id' },
  { key: 'name', name: '名称', fieldName: 'name' },
  { 
    key: 'imo', 
    name: 'IMO', 
    fieldName: 'imo',
    // 自定义该列的渲染内容，把按钮和原有值放在同一单元格
    onRenderItemColumn: (item) => (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        width: '100%',
        padding: '0 8px' // 对齐默认单元格内边距
      }}>
        <span>{item.imo}</span>
        <PrimaryButton 
          onClick={() => alert(item.name)} 
          text='编辑' 
          size='small'
        />
      </div>
    )
  }
];

这样按钮就会和该行的IMO值在同一单元格内，右侧对齐，完全融入原生的行布局，不会出现错位问题。

额外提示：绑定函数的this指向 #

注意在ES6中，如果你的onRenderRows是普通函数，需要在constructor里绑定this，否则会出现this.setState等操作报错：

constructor(props) {
  super(props);
  this.state = {
    // 你的state配置
  };
  // 绑定this
  this.onRenderRows = this.onRenderRows.bind(this);
}

或者直接把函数写成箭头函数（自动绑定this），就像我上面的示例那样。

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