javascript - How can I allow only a single instance of a React component to be present? - Stack Overflow

admin管理员组

文章数量:1297131

I am trying to build a functionality in react.

The problem goes like this: I have three ponents ComponentA, ComponentB, ComponentC. ComponentC can be rendered as a child of either ComponentA or ComponentB.

What I want to achieve is that at any point of time there is only one instance of ComponentC present in the DOM, can be either as a child of ComponentA or ComponentB, both of which are always present.

class ComponentA extends Component {
  render() {
    return (
      <ComponentC />
    );
  }
}

class ComponentB extends Component {
  render() {
    return (
      <ComponentC />
    );
  }
}

class ComponentC extends Component {
  render() {
    return (
      <div>This is ComponentC </div>
    );
  }
}

I tried to build a way to unmount any instance of ComponentC (if present) whenever it is mounted but couldn't succeed.

I am trying to build a functionality in react.

The problem goes like this: I have three ponents ComponentA, ComponentB, ComponentC. ComponentC can be rendered as a child of either ComponentA or ComponentB.

What I want to achieve is that at any point of time there is only one instance of ComponentC present in the DOM, can be either as a child of ComponentA or ComponentB, both of which are always present.

class ComponentA extends Component {
  render() {
    return (
      <ComponentC />
    );
  }
}

class ComponentB extends Component {
  render() {
    return (
      <ComponentC />
    );
  }
}

class ComponentC extends Component {
  render() {
    return (
      <div>This is ComponentC </div>
    );
  }
}

I tried to build a way to unmount any instance of ComponentC (if present) whenever it is mounted but couldn't succeed.

• javascript
• reactjs

Share Improve this question Follow edited Jan 13, 2022 at 19:51 isherwood 61.1k1616 gold badges120120 silver badges169169 bronze badges asked Oct 30, 2017 at 7:25 ShalinShalin 11811 silver badge66 bronze badges 6

• Maybe this singleton package will help you? The singleton design pattern ensures that you have only one instance of a given class. – VTodorov Commented Oct 30, 2017 at 7:35
• Do ComponentA and ComponentB share the same props? Or do they only share ComponentC as a child? – Hemerson Carlin Commented Oct 30, 2017 at 7:36
• @mersocarlin they have nothing in mon except ComponentC – Shalin Commented Oct 30, 2017 at 7:57
• can't you just hide(or set into some 'empty' state) one of the two ComponentC's ? – Massimiliano Janes Commented Oct 30, 2017 at 8:16
• @MassimilianoJanes As far as my knowledge goes, react doesn't allow direct munication between ponents belonging to different parents. That's where global state management concepts like flux & redux e in. Please correct me if I am wrong somewhere. Thanks. – Shalin Commented Oct 30, 2017 at 8:28

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

Implementing a reference counter with hooks does the job:

function Highlander(Component) {
  let immortals = 0
  return function(props) {
    const [onlyOne, thereIsOnlyOne] = React.useState(false)
    React.useEffect(() => {
      immortals++
      if (immortals === 1) {
        thereIsOnlyOne(true)
      }
      () => {
        immortals--
      }
    }, [])
    return onlyOne ? <Component { ...props}/> : <React.Fragment></React.Fragment>
  }
}

function Test() {
  return "test"
}

const OnlyOneTest = Highlander(Test)

ReactDOM.render(<React.Fragment>
  <OnlyOneTest />
  <OnlyOneTest />
  <OnlyOneTest />
</React.Fragment>, document.getElementById("react"));

<div id="react"></div>
<script src="https://cdnjs.cloudflare./ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Starring Highlander as a HoC, which "singletons" the posed ponent (get the Highlander reference ? uhuh).

There are a few ways you can do this. The simplest method that es to mind is simply to check the DOM if said node exists. If it exists, just render nothing or prevent the state from toggling it.

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      showA: false,
      showB: false
    };
  }
  
  toggleA = () => {
    if(document.getElementById("ponent_c") && !this.state.showA) return;
    this.setState((prevState) => ({showA: !prevState.showA}));
  }
  
  toggleB = () => {
    if(document.getElementById("ponent_c") && !this.state.showB) return;
    this.setState((prevState) => ({showB: !prevState.showB}));
  }
 
  render() {
    return(
      <div>
        <div>
          <button onClick={this.toggleA}>Show/Hide A</button>
          <button onClick={this.toggleB}>Show/Hide B</button>
        </div>
        {this.state.showA && <ComponentA />}
        {this.state.showB && <ComponentB />}
      </div>
    );
  }
}

class ComponentA extends React.Component {
  render() {
    return (
      <ComponentC parent="A" />
    );
  }
}

class ComponentB extends React.Component {
  render() {
    return (
      <ComponentC parent="B" />
    );
  }
}

class ComponentC extends React.Component {
  render() {
    return (
      <div id="ponent_c">{"This is ComponentC, rendered from ponent" + this.props.parent}</div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

本文标签： javascriptHow can I allow only a single instance of a React component to be presentStack Overflow