Question

我是React的超级新手，我想根据用户的点击在两个组件之间进行切换。我通过创建“ currentView”状态并使用它来设置/更新用户应查看的内容来解决此问题，但是当我尝试获取要显示的组件时会引发标签错误。这是我的代码：

class App extends Component {
  constructor(props){
    super(props);

    this.state={
      currentView: "Welcome",
    };
  }

  goTrack() {
    this.setState({currentView: "Tracker"});
    console.log(this.state.currentView);
  }

  goReview() {
    this.setState({currentView: "Review"});
    console.log(this.state.currentView);
  }

  render() {
    return (
      <div className="App">
        <aside>
          <nav>
            <ul>
              <li onClick={()=>this.goTrack()}> Tracker </li>
              <li onClick={()=>this.goReview()}> Review </li> 
            </ul>
          </nav>
        </aside>
        <main>  
         <this.state.currentView/>
        </main>
      </div>
    );
  }
}

export default App;

我的问题是我应该如何动态选择要显示的组件而又不重新呈现整个DOM？

Answer 1

解决此问题的一种方法是使用当前状态来匹配对象中包含所需状态的组件中的键。

constructor() {
  super()
  this.state = {
    current: 'welcome',
  }
}


render() {
  const myComponents = {
    welcome: <Welcome />,
    tracker: <Tracker />,
  }
  const CurrentComponent = myComponents[this.state.current]

  return (
    <CurrentComponent />
  )
}

当您使用“ tracker”值更改当前状态时，将呈现Tracker组件而不是Welcome组件。

Answer 2

选项1：条件

render() {
  const { currentView } = this.state;

  // I omit the other stuff to focus on your question
  return (
    <div>
      {currentView === 'Welcome' && <Welcome />}
      {currentView === 'Tracker' && <Tracker />}
      {currentView === 'Review' && <Review />}
    </div>
  );
}

选项2：动态组件

import Welcome from './Welcome';
import Review from './Review';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      current: Welcome,
    };
  }

  // ... stuff ...

  goTrack() {
    this.setState(prevState => { ...prevState, current: Review });
  }

  // ... other stuff ...

  render() {
    # I rename it because React expects a component's name
    # with a capital name.
    const { current: Current } = this.state;

    # As above, I put only relevant rendering
    return <div><Current /></div>;
  }
}

选项3：猜测

实际上，看看您要做什么，我建议您看看react-router-dom。

Answer 3

我猜测Tracker和Review是您要根据this.state.currentView中的值进行切换的两个组件

简而言之，这个<this.state.currentView/>需要一个component / html元素。

执行您要执行的操作的一种方法是执行此操作。

<main> 
   { this.state.currentView == 'Review' && (
      <Review />
   )}
   { this.state.currentView == 'Tracker' && (
       <Tracker />
   )}
</main>

尝试在React中动态选择组件

3 个答案:

选项1：条件

选项2：动态组件

选项3：猜测