当通过条件(React)呈现新内容时，删除以前的内容

Question

我有一个导航栏，它使用eventKeys在按钮之间切换

const CustomNav = ({ active, onSelect, ...props }) => {
  return (
    <Nav
      {...props}
      activeKey={active}
      onSelect={onSelect}
      style={{ marginBottom: "15px" }}>
      <Nav.Item eventKey='all'>All</Nav.Item>
      <Nav.Item eventKey='movies'>Movies</Nav.Item>
      <Nav.Item eventKey='shows'>Shows</Nav.Item>
      <Nav.Item eventKey='people'>People</Nav.Item>
    </Nav>
  );
};

我这样做了：

const Content = () => {
  if (this.state.active === "all") {
    return (
      <div>
        {trending.results &&
          trending.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  } else if (this.state.active === "movies") {
    return (
      <div>
        {trendingMovies.results &&
          trendingMovies.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  }
};

在这里调用它：

    return (
      <div className='Home'>
        <FlexboxGrid justify='center'>
          <Panel bordered header='Trending today!'>
            <CustomNav
              className='customNav'
              appearance='subtle'
              active={active}
              onSelect={this.handleType}
            />
            <Content />
            <Pagination
              {...this.state}
              style={{ marginTop: "15px" }}
              maxButtons={5}
              size='sm'
              pages={totalPages}
              activePage={this.state.activePage}
              onSelect={this.handlePage}
            />
          </Panel>
        </FlexboxGrid>
      </div>
    );
  }
}

来显示每个选项卡的正确数据，但当我在电影选项卡上时，它会显示来自第一个“全部”选项卡的所有数据+“电影”选项卡上的数据。我想分别显示与"this.state.active“控制的正确选项卡对应的每个数据。我也尝试了一个switch语句，但没有成功

Answer 1

您正在使用箭头语法

const Content = () => { ... }

还可以在代码中使用this.state变量！

如果要使用this.state，则需要使用类语法，如

class Content extends React.Component { ... }

但是不要把这两种风格混在一起。

您可能想要做的是将active变量作为属性发送

尝试：

const Content = ({active}) => {
    if (active === 'all') {
        return (...)
    } else if (active === 'movies') {
        return (...)
    }
    return null
}

以及在何处调用组件，并将active值作为道具发送

<Content active={active} />

还请注意，您使用的是变量trending和trendingMovies，并且不清楚它们来自何处，您可能还需要通过道具发送这些变量。

现在，您还可以将if..else逻辑留在内容组件之外，如下所示

const Content = ({myTrending}) => {
    return (
      <div>
        {myTrending.results &&
         myTrending.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
         ))}
      </div>
    );
}

然后在你调用组件的地方，你有

<Content 
    myTrending={active === 'all' ? trending : trendingMovies}
/>

Answer 2

您需要将active和其他变量作为道具传递给Content组件，否则它将无法访问它们：

const Content = ({active, trending=[], trendingMovies=[]}) => {
  if (active === "all") {
    return (
      <div>
        {trending.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  } else if (active === "movies") {
    return (
      <div>
        {trendingMovies.results.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.title}</p>
            </React.Fragment>
          ))}
      </div>
    );
  }
};

 return (
      <div className='Home'>
        <FlexboxGrid justify='center'>
          <Panel bordered header='Trending today!'>
            <CustomNav
              className='customNav'
              appearance='subtle'
              active={active}
              onSelect={this.handleType}
            />
            <Content active={this.state.active} trending={this.state.trending} trendingMovies={this.state.trendingMovies} />
            <Pagination
              {...this.state}
              style={{ marginTop: "15px" }}
              maxButtons={5}
              size='sm'
              pages={totalPages}
              activePage={this.state.activePage}
              onSelect={this.handlePage}
            />
          </Panel>
        </FlexboxGrid>
      </div>
    );
  }
}