javascript - ReactJS - 禁用组件

Question

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

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

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

export default App;

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

Answer 1

既然您在评论中提到，您不想隐藏它，而是想将其灰化。我将使用禁用状态并设置组件的样式。由于 PostList 可以嵌套，因此我们不知道 Prop 是什么，因为您没有指定它们。

另外，我假设您没有使用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;