javascript - ReactJS - Disabling a component - Stack Overflow

admin管理员组

文章数量:1332389

I need to disable PostList ponent 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 ponent? 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 ponents as well. Please share an example.

I need to disable PostList ponent 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 ponent? 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 ponents as well. Please share an example.

• javascript
• reactjs
• web-ponent
• disabled-input

Share Follow edited Jun 20, 2019 at 15:10 Ahmed asked Jun 20, 2019 at 14:49 AhmedAhmed 3,27088 gold badges4545 silver badges7575 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Since you mentioned in a ment that instead of hiding it, you want to grey it instead. I would use the disabled state and style the ponent. Since PostList could be nested, we don't know what the props are since you did not specify them.

Also, I assuming that you are not using styled-ponents.

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;

There are 2 different ways I like to do something like this.

One way you can do it is by using state

this.state = {
  showList: false
}

and than something like

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

Another option is to pass the showList in state as a prop, so something like

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

)

and than in PostList something like

return props.show && (your ponent here)

You can also use conditional classNames, so if you want that ponent shown, you can throw a className and style it how you normally would, but if not, just throw a display: none. I usually save doing that for replacing a navbar with a dropdown button on smaller screens, but it is another option

本文标签： javascriptReactJSDisabling a componentStack Overflow