标签: office-ui-fabric-react

我正在尝试创建一个带有可排序列的DetailsList（类似于此处文档中的示例： https: //uifabric.azurewebsites.net/#/controls/web/detailslist），但我想使用而不是类组件功能组件和钩子。

问题在于，当执行 onColumnClick 函数时，“items”数组仍然为空。

这基本上是我的组件的设置：

const MyList= () => {
  const [items, setItems] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const newItems = someFetchFunction()
    setItems(newItems);

    const newColumns= [
      {
        key: "column1",
        name: "Name",
        fieldName: "name",
        onColumnClick: handleColumnClick,
      },
      {
        key: "column2",
        name: "Age",
        fieldName: "age",
        onColumnClick: handleColumnClick,
      },
    ];
    setColumns(newColumns);
  }, []);

  const handleColumnClick = (ev, column) => {
    console.log(items); // This returns [] instead of a populated array.
  };

  return <DetailsList items={items} columns={columns} …

今天我尝试使用Fluent-ui 的分组详细信息列表。

我的期望：我需要声明一些组，比如说红色、蓝色、绿色，然后添加到每个项目，我想添加到列表中，这是一个将项目映射到组的特定属性。例如：

groups: [
            { key: 'red', name: 'Color: "red"'},
            { key: 'green', name: 'Color: "green"'},
            { key: 'blue', name: 'Color: "blue"' },
          ],

items: [...,
        { key: 'red',anyProp1: "abc", anyProp2: "dfg",...},
       ...,
      ]

我发现我必须做的事情：我需要对包含我的项目的数组进行排序，属于红色组的所有项目都需要位于一个块中。例如：[红，红，红，蓝，蓝，绿，绿，绿]。现在我需要提供有关 startIndex 和 count 的信息，以将我的项目数组映射到组。

组的定义可能如下所示：

 groups: [
        { key: 'groupred0', name: 'Color: "red"', startIndex: 0, count: 2, level: 0 },
        { key: 'groupgreen2', name: 'Color: "green"', startIndex: 2, count: 0, level: 0 },
        { key: 'groupblue2', name: 'Color: "blue"', startIndex: 2, …

我有一种情况，我想在FluentUI DetailsList中显示数据，其中列名可能很长，而列内容可能很窄。在这种情况下，标头将被截断。 请参阅此代码笔。

有什么方法可以改变这种行为，使标题文本换行多行？

虽然我在 2 年前就发现了这个悬而未决的问题，但我在 Stackoverflow、Github 或官方文档上都找不到该主题的答案。以下是我尝试过的一些方法：

• word-break: break-all;通过headerClassName以下字段注入 CSS 类IColumn
• isMultiLine列上的设置
• DetailsHeader我可以覆盖其渲染的组件本身似乎onRenderDetailsHeader没有提供任何用于自定义文本显示方式的道具

是否有一种方法可以实现所需的行为（换行多行而不是截断长列标题）？

我正在尝试office-ui-fabric-react与我的项目一起使用。但是我在控制选择输入时卡住了。我想在 OnChange 事件上获取所选项目的值。但是没有value上event.target。这似乎div只有textContent. 我必须使用ref吗？但是当我使用时我并不高兴，ref因为我相信它不是反应方式。

库：https : //developer.microsoft.com/en-us/fabric#/controls/web/dropdown

  <Dropdown
      label={'Dropdown'}
      onChange={e => {
          // Not working.
          console.log(e.target.value)
      }}
      options={[
          { text: 'A', key: 'keyA'}, 
          { text: 'B', key: 'keyB'}
      ]}
   />

1. 有没有不使用 ref 的解决方案？

2. 如果我必须使用 ref 我应该怎么做？

安装@fluentui/react 后，我​​尝试使用像这个文档https://developer.microsoft.com/en-us/fluentui#/styles/web/layout这样的网格

ReactDOM.render(
  <React.StrictMode>
      <div className="ms-Grid" dir="ltr">
          <div className="ms-Grid-row">
              <div className="ms-Grid-col ms-sm4 ms-xl4">A</div>
              <div className="ms-Grid-col ms-sm8 ms-xl8">B</div>
          </div>
      </div>
  </React.StrictMode>,
  document.getElementById('root')
);

但它不起作用，其他控制组件工作正常。我错过了什么？

他们的文档只提到了 npm 包。

我正在office-ui-fabric-react中寻找一个Table组件，我可以在自定义 WebPart中使用它来显示来自 API 的一些数据，并且如果用户愿意，可以轻松将其导出到 Excel 工作表。