Question

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

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

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

export default App;

禁用（并灰显）组件的最佳方法是什么？可能的解决方案是将值作为prop传递，然后将其应用于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

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

一种方法是使用状态

this.state = {
  showList: false
}

而不是类似

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

另一种选择是将状态为showList的内容作为道具传递，所以类似

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

)

并且比PostList中的类似

return props.show && (your component here)

您还可以使用条件类名，因此，如果要显示该组件，则可以抛出类名并按照通常的方式对其进行样式设置，但是如果没有，则仅显示：无。我通常会避免在较小的屏幕上用下拉按钮替换导航栏，但这是另一种选择

ReactJS-禁用组件

2 个答案: