Блог

Главная - Вопросы по программированию - Я не могу понять, как переключиться в реакции с двумя компонентами

Я не могу понять, как переключиться в реакции с двумя компонентами

#reactjs

Вопрос:

Я хочу иметь возможность переключаться между компонентами в одном файле. Я хочу, чтобы по умолчанию был указан счет ShowAccount. Кнопка для отображения учетной записи редактирования, которая скрывает учетную запись.

Макет того, о чем я думаю:

 import React from 'react';
import EditAccount from './editacc';
import ShowAccount from './showacc';

const Toggle = () => {
    return(
        <>  
            if (EditAccount === Active) {
                hide <ShowAccount />
                show <EditAccount />
            } else {
                show <ShowAccount />
            }
        </>
    );
};

export default Toggle;

Index.js

 import React from 'react';
import './acc.css';
import Header from '../../../Header';
import Toggle from './content/toggle';

const Myaccount = () => {
  return (
    <>
      <Header />
      <br />
      <Toggle />
    </>
  );
};
export default Myaccount;

Комментарии:

1. В этом вообще нет никакого смысла. У вас есть условный оператор в JSX, где у вас могут быть только выражения (и даже тогда они должны быть заключены в фигурные скобки), вы сравниваете компонент с неопределенной переменной Active и случайно придумали операторы show и hide.

2. Я сказал, что это макет того, что я хочу, чтобы он делал. Очевидно, что это не сработает таким образом, иначе бы так и было… все, что я хочу сказать, это то, что если один компонент отображается, я хочу, чтобы другой был скрыт. Я не хотел, чтобы кто-то подумал, что я на самом деле пытаюсь сделать это таким образом. @jonrsharpe

3. Я бы посоветовал вам прочитать, например reactjs.org/docs/conditional-rendering.html , а не просто гадать.

Ответ №1:

Вы можете обрабатывать с помощью состояния и визуализировать условный компонент.

 import React from 'react';
import EditAccount from './editacc';
import ShowAccount from './showacc';

const Toggle = () => {
    const [isEditAccount, setEditAccount] = React.useState(false);
     
    const handleToggleView = () => {
       setEditAccount(!isEditAccount)
    };

    return ( 
      <>
      <button onClick={handleToggleView} >
       Toggle View
      </button>
      {isEditAccount ? <EditAccount /> : <ShowAccount />} 
      </>
    );
};

export default Toggle;

Ответ №2:

https://codesandbox.io/s/react-new?file=/src/App.js

 class App extends React.Component {
  state = {
    isAcc: true
  };

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ isAcc: !this.state.isAcc })}>
          Toggle View
        </button>
        {this.state.isAcc ? <Acc /> : <Edit />}
      </div>
    );
  }
}
const Acc = () => <h1>Account</h1>;
const Edit = () => <h1>Edit</h1>;

ReactDOM.render(<App />, document); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Метки: ,