如何在反應中重新呈現相同的組件頁面？

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，因為這不是您應該擁有的。