小编mel*_*bil的帖子

在不使用返回值的情况下执行映射操作是反模式吗?

假设我有一个列表,我想使用映射函数向其中添加一些值:

const arr = [1, 2, 3, 4, 5];
const anotherArr = [];
Run Code Online (Sandbox Code Playgroud)

我使用函数式方法来做到这一点:

arr.map((item) => anotherArr.push(item));
Run Code Online (Sandbox Code Playgroud)

这是一个反模式/错误的逻辑——也就是说,不使用映射操作返回值做任何事情?这方面有什么好的资源吗?

(我知道这个逻辑很愚蠢,我可以复制列表 - 这不是我的问题的重点)

javascript functional-programming map-function

7
推荐指数
1
解决办法
631
查看次数

如何在React ui-fabric库中自定义GroupedList组件中的标题

我在 React ui-fabric 库中自定义 GroupedList 组件标头时遇到问题。我想做的是删除复选框和数字计数(包括括号)。单击(灰色)行时,行为应相当于单击 V 形图标(展开/折叠子项)。从视觉角度来看,这就是我想要做的:

在此输入图像描述

可以在此处找到此示例的组件及其源代码。

经过一些研究后,我发现实现我想要使用此组件执行的操作的唯一方法是将 groupProps 传递给 GroupedList 组件,如下所示:

public render(): JSX.Element {
return (
  <FocusZone>
    <SelectionZone selection={this._selection} selectionMode={SelectionMode.multiple}>
      <GroupedList
        items={_items}
        onRenderCell={this._onRenderCell}
        selection={this._selection}
        selectionMode={SelectionMode.multiple}
        groups={_groups}
        // adding this overrides the default header render 
        groupProps={{
            onRenderHeader: this._onRenderHeader
          }}
      />
    </SelectionZone>
  </FocusZone>
);}


private _onRenderHeader(props: IGroupDividerProps): JSX.Element {
// code to change the header goes here
return (
    <div className={css('ms-GroupedListExample-header', FontClassNames.xLarge)}>
        Group1
    </div>
);}
Run Code Online (Sandbox Code Playgroud)

我只是不知道在 _onRenderHeader 中写什么来更改标题,使其看起来和行为就像我在图片中描述的那样。非常感谢您的帮助。

frontend reactjs office-ui-fabric

5
推荐指数
1
解决办法
4807
查看次数

React-Router V4渲染函数中的非lambda

我有一个组件,我需要在使用Route组件渲染时传递道具.问题是,打字稿不允许在JSX中使用lambda函数,我只是无法弄清楚如何将其重写为允许的函数:

<Route
   key={index}
   exact={true}
   path={item.urlAddress}
   render={() => <DocumentView data={data} />}
/>
Run Code Online (Sandbox Code Playgroud)

我试过这个,但它仍被评估为lambda,不知道为什么:

render={function() { <DocumentView /> }}
Run Code Online (Sandbox Code Playgroud)

谁知道如何重写它?

编辑:我知道这是一个linter发布,我正在寻找根据ts-lint标准写这个的正确方法.我知道我可以添加规则异常,但我想知道如何以"正确"方式执行此操作,而不是每次遇到linting问题时都不添加异常

typescript reactjs react-router

1
推荐指数
1
解决办法
685
查看次数