Как направить компонент класса, нажав кнопку в React? - PullRequest
Новая
       131

Как направить компонент класса, нажав кнопку в React?

0 голосов
/ 06 августа 2020

Я новичок в React. Я пытаюсь создать страницу, и на главной странице есть 3 button или img. Когда я щелкну любой из них, я буду перенаправлен на другой компонент класса. Вы можете относиться к этому как к щелчку по значку и перенаправлению на страницу другой категории (просто пример). Ниже представлена ​​моя структура и частичный код, который я пробовал. Я понятия не имею, как этого добиться, я погуглил и, кажется, не могу найти то, что хочу.

Структура: 

/src
  .index.js
  .App.js
  .BookStore.js
  .FruitStore.js
  .FoodStore.js

index. js

import React from "react";
import { render } from "react-dom";
import App from "./App";

render(
    <App />, 
    document.getElementById('root')
);

Приложение. js: 

import React from "react";
import BookStore from "./BookStore";

const AppContainer = () => {
    return (
        //do the routing 
        <BookStore/>
    )
};

export default AppContainer;

Книжный магазин. js

export default class BookStore extends React.Component {
}
const contentDiv = document.getElementById("root");
const gridProps = window.gridProps || {};
ReactDOM.render(React.createElement(BookStore , gridProps), contentDiv);

1 Ответ

1 голос
/ 06 августа 2020

Во-первых, вы можете взглянуть на реагирующий маршрутизатор / one, например https://reactrouter.com/web/guides/quick-start

Однако, поскольку вы пишете, что вы новичок в реакции, это может быть многовато ...

Во-первых, мне было интересно, почему вы используете "ReactDOM" в своем индексе js (это кажется правильным), но также и в BookStore. js . Я также рекомендовал бы писать ваши компоненты как функции, такие как ваш «AppContainer», и больше не использовать компоненты класса (или вам действительно нужно это делать? - почему?). Вместо этого вы можете использовать хуки, чтобы иметь, например, состояние в компонентах.

В этом случае вам понадобится любое состояние в вашем AppContainer, которое используется для маршрутизации. Может быть, вот так: 

const AppContainer = () => {
    const [showDetail, setShowDetail] = useState();
    return <>
        {!showDetail && <BookStore onDetail={detail => setShowDetail(detail)} />}
        {showDetail && <DetailPage detail={showDetail} onBack={() => setShowDetail(undefined)}}
    </>
}

После этого ваш AppContainer имеет состояние, следует ли показывать книжный магазин (что отображается, когда "showDetail" является ложным, или DetailPage, которая отображается, если showDetail является правдивым.

Чтобы это работало, ваш книжный магазин должен обеспечивать обратные вызовы, чтобы AppContainer знал, что что-то должно измениться. Очень просто это могло бы выглядеть так: 

const BookStore = ({onDetail}) => {
    return <button onClick={() => onDetail("anything")}>Click me</button>
}

Теперь, когда кто-то нажимает кнопку на bookstore, он вызывает обратный вызов onDetail, который был установлен в AppContainer для установки состояния showDetail. Таким образом, в этом случае он будет обновлен на «что угодно». Это приведет к повторной визуализации в AppContainer, которая теперь будет вместо этого отобразить компонент DetailPage.

...