javascript - ReactJS-禁用组件

我需要在初始状态下禁用PostList组件。

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

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

export default App;

禁用（和灰显）组件的最佳方法是什么？可能的解决方案是将值作为prop传递，然后将其应用于ui元素。但是，请记住，PostList也可能具有内部嵌套的组件。请分享一个例子。

最佳答案

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