小编xxd*_*doo的帖子

连接和withRouter问题

我正在为我的项目使用Redux和React。我在App.js中有一些路由。我还在项目的react-redux中使用connect函数。为了防止更新阻止问题,我通常以这种方式包装组件

withRouter(connect(mapStateToProps, mapDispatchToProps)(App)),
Run Code Online (Sandbox Code Playgroud)

但是,如果我更改了withRouter的顺序并连接它不起作用:

connect(mapStateToProps, mapDispatchToProps)(withRouter(App))
Run Code Online (Sandbox Code Playgroud)

我在App.js中有console.log道具。它已经收到位置和历史道具。我正在弄清楚顺序为什么重要的背后的理论?

javascript frontend reactjs redux react-redux

10
推荐指数
4
解决办法
4954
查看次数

React DatePicker 日历显示在表头后面

我在我的项目中使用了 react datePicker 和 fixed-data-table-2 。当我打开日历时,它显示在桌头后面。这是CSS文件的代码:

.ui-datepicker {
   z-index: 9999 !important;
}
.table{
   z-index: -1000  !important;
}
Run Code Online (Sandbox Code Playgroud)

这是 DatePicker 的 React 代码?

 <div className='ui-datepicker'>
           <DatePicker
                 selected={this.state.startDate}
                 selectsStart
                 startDate={this.state.startDate}
                 endDate={this.state.endDate}
                 onChange={this.onFilterStart}
            />
</div>
Run Code Online (Sandbox Code Playgroud)

这是表格的快捷代码:

<div className='table'>
     <Table
            rowHeight={50}
            rowsCount={tableData.getSize()}
            width={1000}
            maxHeight={1800}
            height={700}
            groupHeaderHeight={30}
            headerHeight={50}
            onColumnResizeEndCallback={this.resizeEndCallback}
            isColumnResizing={false}
            >
            <ColumnGroup
                header={<Cell>Basic Info</Cell>}>
                <Column columnKey='menuTranslation'
                        header={ <SortHeaderCell
                                languageChosen={this.state.languageChosen}
                                onSortChange={this.sortChange}
                                sortDir={colSortDirs.foodName}>Food 
              Name</SortHeaderCell>}
                        isResizable={true}
                        width={columnWidths.foodName}
                        cell={<MyTextCell data={tableData}  
              field='menuTranslation' col="menuTranslation"  />}
                />
<div>
Run Code Online (Sandbox Code Playgroud)

这是问题的图像:

图片

css html-table z-index datepicker reactjs

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

更改material-ui复选框的样式

我在我的项目中使用 React 并使用styled-component包进行样式设置,但我在使用样式组件设置 Material-ui 复选框样式时遇到问题。我需要缩小复选框的边框,但我找不到 Material-ui 的任何接口来设置边框宽度的样式。

这是我当前的代码:

const StyledCheckbox = styled(Checkbox)`
  svg{
    color: #CDCDCD;
    font-size: 30px;
  }
`
Run Code Online (Sandbox Code Playgroud)

用于设置svg复选框组件的样式。我不知道哪个处理propssvg边框宽度svg。我尝试过props类似font-weight, border-width,但它们都不起作用。

代码沙盒按钮:编辑 vv50o01x2l

预期结果:

在此输入图像描述

当前结果:

在此输入图像描述

css frontend reactjs material-ui styled-components

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