如何在反应中重新呈现相同的组件页面？

Question

我想重新渲染组件。

选择菜单时，我使用相同的组件。 组件名称是“性能”。

导航.js

<Menu.Item as={Link} to='/'>Home</Menu.Item>

        <Dropdown item simple text='Performance'>
          <Dropdown.Menu>
            <Dropdown.Item as={Link} to='/evaluation/performance/item/bp'>BP</Dropdown.Item>               
            <Dropdown.Item as={Link} to='/evaluation/performance/item/rfl'>RFL</Dropdown.Item>
            <Dropdown.Item as={Link} to='/evaluation/performance/item/srw'>SRW</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Container>
    </Menu>
    <Switch>
      <Route exact path="/" component={Home} exact={true} />
      <Route path="/evaluation/:evaluation/item/:item" component={Performance} />
    </Switch>

和 Performance.js

class Performance extends Component {
  constructor(props) {
    super(props);    
    this.state = {
     evaluation: ''
      ,evaluationItem: ''
      ,isLoading: false
    };
  }
   shouldComponentUpdate(nextProps){
     if(this.props.match.params.item !=nextProps.match.params.item){
     console.log(this.props.match.params.item +',' +nextProps.match.params.item);   
     }
     return true;
   }
 render() {
    return (
      <Wrapper className="Performance">        
          {this.state.isLoading ? <Loadering /> : null}        
        <div>
          <TestCases/>
        </div>
        <SplitPane split="vertical" defaultSize={"25%"} minSize={"20px"} >
          <SplitPane
            split="horizontal"
            defaultSize={"30%"}
          >

            <div className='test-env'>
              <TestEnv/>
            </div>
            <div className='-data'>
              <Data/>
            </div>
          </SplitPane>
          <div className='chart-content'>
            <PerformanceChart />
          </div>
        </SplitPane>
      </Wrapper>
    )
  }
};
export default Performance;

我想在更改菜单时重新渲染。 首先，我选择了BP菜单，然后我选择了SRW菜单。 再次选择BP，页面显示之前的视图。 我的意思是组件不会重新渲染。 我想看看新的 BP 页面。

加。 当我使用 Link 时，控制台会显示警告。

警告：validateDOMNesting(...): 不能作为 的后代出现。

它发生 Dropdown.Item ... 有谁知道原因？

Answer 1

您在第一个<Route>标签中有一个错字，将“excact”更改为“exact”。

要强制更新，

<Dropdown.Item as={Link} to={{pathname: '/evaluation/performance/item/bp', state: 'refresh'}}>
BP
</Dropdown.Item>

在 BP 组件中：

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.location.state === 'refresh') {
    return prevState;
  }
  return null;
}

对于警告，如果您在span或p有一个div ，请检查您的 DOM，因为这不是您应该拥有的。