ReactJS - Отключение компонента - PullRequest
Новая
       17

ReactJS - Отключение компонента

0 голосов
/ 20 июня 2019

Мне нужно отключить компонент PostList в исходном состоянии. 

import React from 'react';
import PostList from './PostList';

const App = () => {
    return (
        <div className="ui container">
             <PostList />
        </div>
    );
};

export default App;

Какой лучший способ отключить (и выделить) компонент? Возможные решения - передать значение в качестве реквизита и затем применить его к элементу пользовательского интерфейса. Однако имейте в виду, что PostList может также иметь внутренние вложенные компоненты. Пожалуйста, поделитесь примером.

Ответы [ 2 ]

2 голосов
/ 20 июня 2019

Так как вы упомянули в комментарии, что вместо того, чтобы скрывать это, вы хотите вместо этого выделить его серым цветом.Я бы использовал отключенное состояние и стиль компонента.Поскольку PostList может быть вложенным, мы не знаем, что это за реквизиты, поскольку вы не указали их.

Кроме того, я предполагаю, что вы не используете styled-components. 

import React, { useState } from "react";
import PostList from "./PostList";

const App = () => {
  const [disabled, setDisabled] = useState(true);

  return (
    <div className="ui container">
      <PostList
        style={{
          opacity: disabled ? 0.25 : 1,
          pointerEvents: disabled ? "none" : "initial"
        }}
      />
    </div>
  );
};

export default App;
0 голосов
/ 20 июня 2019

Есть 2 разных способа сделать что-то подобное.

Один из способов сделать это - использовать состояние 

this.state = {
  showList: false
}

, а затем что-то вроде 

return (
   {this.state.showList && <PostList />}
)

Другой вариант - передать showList в состояние в качестве реквизита.что-то вроде 

return(
<PostList show = {this.state.showList} />

)

, а затем в PostList что-то вроде 

return props.show && (your component here)

Вы также можете использовать условные classNames, поэтому, если вы хотите, чтобы этот компонент был показан, вы можете бросить className и стильэто как обычно, но если нет, просто бросьте дисплей: нет.Я обычно сохраняю это для замены панели навигации на выпадающей кнопке на маленьких экранах, но это еще один вариант

...