小编tec*_*995的帖子

我正在使用react-router-dom的v4

我需要访问this.props.match我的导航栏组件,以便我可以设置活动类.我正在使用react-materialize.在<NavItem>标签中,我想添加className={this.props.match ? 'active' : ''}.但是,我似乎无法访问该比赛.每次我在控制台中打印时,Props都是一个空对象.

我的Nav.js

<Navbar brand='Fuzic' href="/" className="orange darken-3" right>
  <NavItem className={this.match ? 'active' : ''} href="/devices">Devices</NavItem>
  <NavItem><Link to="/devices">Media</Link></NavItem>
  <NavItem><Link to="/devices">Alarms</Link></NavItem>
  <NavItem><Link to="/devices">Interrupts</Link></NavItem>
  <NavItem><Link to="/auth">Admin</Link></NavItem>
</Navbar>

我的App.js

<BrowserRouter>
  <div>
    <Nav/>
    <div className="container">
      <Switch>
        <PropsRoute exact path="/" component={Auth}/>
        <PropsRoute exact path="/devices" component={Devices} devices={this.state.devices} setCurrentDevice={this.setCurrentDevice} />
        <PropsRoute path="/devices/:deviceId" component={Detail} currentDevice={this.state.currentDevice} />
        <PropsRoute path="/auth" component={Auth}/>
        <PropsRoute component={NotFound}/>
      </Switch>
    </div>
  </div> 
</BrowserRouter>

helper.js - 结合我传递的道具和来自react-router的道具

// Exerp From:  https://github.com/ReactTraining/react-router/issues/4105
export const renderMergedProps = (component, ...rest) …

我正在评估react-vis。假设我有一个 react-vis简单图表，当图表悬停时，如何添加一条随鼠标移动的垂直线？我的猜测是，我需要在 XYPlot 内添加一个十字准线组件，也许还需要一个 YAxis 组件。但我不明白如何做，也找不到任何相关的例子。

function Chart({data}) {
  return <XYPlot width={400} height={300}><XAxis/><YAxis/>
    <HorizontalGridLines />
    <VerticalGridLines />
    <LineMarkSeries data={data} />
    </XYPlot>;
}

我正在使用反应过渡来淡入和淡出内容。

大多数情况下，这可以正常工作，但是我注意到一页可以立即呈现，而不会经历过渡状态。

我的活动：

  routeChange =(e) => {
    if(e.target.nodeName == "LI" || e.target.nodeName == "a") {
      return;
    }

    let path = "/detail/" + this.state.merchant.id;
    this.props.dispatch(push(path));
  }

还有我在该文件中的mapDispatchToProps

function mapDispatchToProps(dispatch) {
  let actions = bindActionCreators({ saveColor }, dispatch);
  return { ...actions, dispatch };
}

这是我的路径的工作方式：

<Route
  render={({ location }) => {
    const { pathname } = location;
    return (
      <TransitionGroup className="transition-group">
        <CSSTransition
          key={pathname}
          classNames="page"
          timeout={{
            enter: 1000,
            exit: 1000,
           }}
          >
          <Route
            location={location}
            render={() => (
              <Switch>
                <Route exact path="/login" component={LoginPage} /> …

我正在尝试通过 ftp 将我的 React 应用程序的 npm 构建版本部署到 azure web 服务。我移动了构建文件夹，但是当我加载应用程序的 URL 时，默认屏幕会加载Hey Node Developers!.

我可以通过 github 和 kudu 进行部署。但是，我不认为这是一个生产质量的应用程序，因为它不是npm run build使用create-react-app.

我已经阅读了这个天蓝色指南以及各种博客。我也包含了该web.config文件。没有什么能让我的页面正确加载。

我尝试过使用节点版本10.1、10.14和LTS。我尝试过使用 Linux 和 Windows 应用服务。

我正在尝试过滤我的数据以显示我的减速器并在第一次渲染中工作。但是，当我尝试使用分页更改页面时出现此错误：

× 重新渲染过多。React 限制渲染次数以防止无限循环 dispatch(GetFilteredData());

当我检查控制台时，我得到了 的无限循环console.log(data2)，但我不知道为什么会这样。

这是我的派遣工作 PaisBody.js

import React, { useState, useEffect } from 'react';
import {useSelector,useDispatch} from 'react-redux';
import TablePagination from 'Layout/Table/TablePagination';
import {InsertPageCount,InsertData,GetFilteredData} from 'Redux/Actions/Pagination';
import GetApi from 'Url/index';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import allReducers from 'Redux/Reducers/Pagination';
import {TableFilter} from 'Layout/Table/TableFilter';



const PaisBody = (props) => {

  const dispatch = useDispatch();
  dispatch(InsertData(props.data));
  dispatch(InsertPageCount(props.data.length));

  dispatch(GetFilteredData());

  const CurrentPage = useSelector(state => state.CurrentPage.page);
  const data2 = useSelector(state => state.CurrentPage.filteredData);

  console.log(data2);



  return (
    <div> …