ReactJS - Disabling a component

Question

I need to disable PostList component in its initial state.

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

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

export default App;

Whats the best way to disable (and grey out) a component? Possible solutions are to pass a value as props and then apply it to a ui element, However please keep in mind that PostList may have inner nested components as well. Please share an example.

Answer 1

由于您在评论中提到您不想隐藏它，而是想将其变灰。我会使用禁用状态并设置组件样式。由于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;