Question

我绝对不是React的新手，需要创建一个按钮来将用户从当前组件（MovieView）转到主要组件（MainView)。我设法正确地创建了它， onClick触发MainView的显示，我知道我无法从函数中调用类（如控制台所说），因此我创建了另一个要调用的函数并触发MainView。但您可能想知道，它不起作用，这是我正在使用的代码：

import React from 'react';
import { MainView } from '../main-view/main-view';

function NewButton() {
  return <MainView />;
}

export class MovieView extends React.Component {

  constructor() {
    super();

    this.state = {};
  }

  render() {
    const { movie } = this.props;

    if (!movie) return null;

    return (
      <div className="movie-view">
        <img className="movie-poster" src={movie.imagePath} />
        <div className="movie-title">
          <span className="label">Title: </span>
          <span className="value">{movie.title}</span>
        </div>
        <div className="movie-description">
          <span className="label">Description: </span>
          <span className="value">{movie.plot}</span>
        </div>

        <div className="movie-genre">
          <span className="label">Genre: </span>
          <span className="value">{movie.genre.name}</span>
        </div>
        <div className="movie-director">
          <span className="label">Director: </span>
          <span className="value">{movie.director.name}</span>
        </div>
        <div className="back-movies">
          <button onClick={NewButton}>Back</button>
        </div>
      </div>
    );
  }
}

您能看到这一点为您指出要走的路，还是我如何正确地称呼此MainView类。我知道这是一个简单的任务，但是我恐怕还没有吸收React原理。预先感谢大家。

Answer 1

在不引入其他依赖关系的情况下，此示例最简单的方法可能是使用状态来跟踪是否单击了按钮。如果已单击，则渲染MovieView，如果未渲染MainView。

为此，您需要执行以下操作：

设置状态变量，该变量跟踪MainView事件中应呈现的onClick。（布尔值可能就足够了）
在render()中：
- 如果状态var为false，则呈现MovieView的内容。
- 如果状态var为true，则渲染MainView组件。

实施细节留作练习：）

如果您已经在使用路由器（例如react-router），则可以将其更新为链接到MainView组件的URL。

Answer 2

我将类改为功能组件，并像这样实现它：-）

- name: Ensure json file exists
copy:
  content: "{}"
  dest: /tmp/var.json
  force: false

Answer 3

如果您需要基于响应中的用户操作添加或删除组件或显示新视图，则需要通过state进行操作。

import React from 'react';
import { MainView } from '../main-view/main-view';

export class MovieView extends React.Component {

constructor() {
super();

this.state = {
  showMainView: false;
};
}

toggleMainView = () => this.setState(prevState => ({ showMainView: 
!prevState.showMainView})) 

render() {
const { movie } = this.props;
const { showMainView } = this.state;
if (!movie) return null;

return (
  <div className="movie-view">
    <img className="movie-poster" src={movie.imagePath} />
    <div className="movie-title">
      <span className="label">Title: </span>
      <span className="value">{movie.title}</span>
    </div>
    <div className="movie-description">
      <span className="label">Description: </span>
      <span className="value">{movie.plot}</span>
    </div>

    <div className="movie-genre">
      <span className="label">Genre: </span>
      <span className="value">{movie.genre.name}</span>
    </div>
    <div className="movie-director">
      <span className="label">Director: </span>
      <span className="value">{movie.director.name}</span>
    </div>
    <div className="back-movies">
      <button onClick={this.toggleMainView}>Back</button>
    </div>
    // render the mainView based on the state
    { showMainView && <MainView />}
  </div>
);
}
}

Answer 4

我找到了一个解决方案，我在这里无法获得帮助。我首先在这里粘贴了一些代码，但是，我认为给出完整答案可能会有所帮助。

因此，我在这里提出的问题是关于一个名为<MovieView的组件，该组件是与另一个名为MainView的组件（在另一个文件中）交互的应用程序的一部分。

解决方案是在onClick的实时14上插入方法<MovieView>和第39行的按钮，您可以看到at this file on Github。如果文件已更新，请检查11月22日的版本。

但是，已经在主要组件<MainView>中找到了解决方案，并在第48和49行添加了代码。这是文件的链接：https://github.com/cgobbet/react-client/blob/master/src/components/main-view/main-view.jsx

包含整个应用程序的存储库在此页面上：https://github.com/cgobbet/react-client。

对审稿人表示抱歉（我不小心删除了@ nick-miller提交的出色答案的一部分。

使用React单击按钮后切换到其他组件

4 个答案: