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 可以嵌套，我们不知道道具是什么，因为你没有指定它们。

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

Answer 2

我喜欢用两种不同的方式来做这样的事情。

一种方法是使用状态

this.state = {
  showList: false
}

比

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

另一种选择是将状态中的 showList 作为道具传递，例如

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

)

比 PostList 中的东西更像

return props.show && (your component here)

你也可以使用条件类名，所以如果你想显示那个组件，你可以抛出一个类名并按照通常的方式设置它的样式，但如果不是，就抛出一个显示：none。我通常会在较小的屏幕上用下拉按钮替换导航栏，但这是另一种选择

ReactJS - 禁用组件

ReactJS - Disabling a component

javascript

disabled-input

web-component