Partager du contenu entre des composants adjacents, HOC?

Je suis d'accord avec victor.ja mais je me demandais si vous aviez un magasin mondial comme redux. Vous pouvez alors simplement appeler l'action pour mettre à jour l'état du magasin à partir du composant supérieur. Le composant d'ordre supérieur peut recevoir l'état du magasin comme accessoire et mettre à jour le composant inférieur.

Il existe plusieurs façons d'aborder ce problème.

1) Vous pouvez utiliser un système de gestion d'état tel que Redux, mobx ou vous pouvez utiliser l'API contextuelle de React https://reactjs.org/docs/context.html . CEPENDANT, puisque vous êtes assez nouveau dans React, je vous suggère de ne pas vous attaquer à ces bonnes connaissances tant que vous n'êtes pas à l'aise avec le flux de base

2) Vous pouvez implémenter une simple relation parent-enfant code> pour transmettre des données entre les composants. Finalement, cela vous permet de fournir une communication entre les composants adjacents (frères). Comme cela a déjà été dit, ce flux s'appelle généralement la levée de l'État. En fait, les systèmes de gestion étatique fonctionnent de la même manière. Laissez-moi vous expliquer cette logique en prenant également en compte votre exemple de code basé sur un scénario.

Nous aurons un composant Container. Ce composant sera un composant avec état. Le seul but de ce composant Container est d'avoir son propre état holistique, qui sera traité comme la source de vérité par ses enfants. Avoir quelques méthodes pour définir des moyens de mettre à jour cet état holistique. Les composants enfants seront des composants purs ou des composants représentationnels. Cela signifie qu'ils n'auront pas leurs propres états. Ils seront soit utilisés pour afficher les données que leur parent leur transmet, soit pour déclencher des méthodes définies par leur parent afin de mettre à jour la source de l'état de vérité.

Nous aurons deux scénarios: Dans le scénario 1, la liste de contenu sera représentée telle quelle. Dans le scénario 2, la liste de contenu sera représentée en inversant l'ordre des lettres

function ContentDisplayer({ contents, reversed }) {
  return (
    <div className="App">
      {contents.map(content => (
        <div key={content.id}>{reversed ? content.text.split("").reverse().join("") : content.text}</div>
      ))}
    </div>
  );
}

Comme vous pouvez le voir, le conteneur n'a qu'un état, quelques méthodes pour mettre à jour l'état et composant enfant. Pas un seul HTML utilisé à l'intérieur de sa méthode de rendu.

Notre premier composant enfant est ContentCreator

function ContentCreator({
  handleChange,
  handleClick,
  value
  }) {
  return (
    <div className="App">
      <label> New Content</label>
      <input type="text" value={value} onChange={event => handleChange(event.target.value)} />
      <button onClick={handleClick}>Add Content</button>
    </div>
  );
}

function ReversedContentDisplayer({ contents }) {
  return (
    <div className="App">
      {contents.map(content => (
        <div key={content.id}>{content.text.split("").reverse().join("")}</div>
      ))}
    </div>
  );
}

Ce composant agit comme un formulaire (je suis trop paresseux pour l'envelopper avec la forme et la fonction onSubmit). Et le but principal de ce composant est de mettre à jour la clé contents de notre source d'état de vérité

Le deuxième composant est appelé Reversifier (je ne Je ne crois pas qu'il existe un tel mot)

function Reversifier({reversed, handleReverse}) {
  return <button onClick={handleReverse}>{reversed ? 'Back to normal' : 'Reversify'}</button>
}

Le but principal de ce composant est de basculer la clé inversée de notre source d'état de vérité. Vous pouvez également voir que, en fonction de la valeur de inversé , le texte à l'intérieur du bouton change également (reflète une sorte de scénarios différents d'une manière différente)

Et nos deux derniers composants sont

function ContentCreator({
  handleChange,
  handleClick,
  value
  }) {
  return (
    <div className="App">
      <label> New Content</label>
      <input type="text" value={value} onChange={event => handleChange(event.target.value)} />
      <button onClick={handleClick}>Add Content</button>
    </div>
  );
}

Basé sur le scénario, c'est-à-dire s'il affiche le contenu comme normal ou inversé, à l'intérieur de la méthode de rendu de notre composant conteneur, nous affichons l'un ou l'autre. En fait, ces deux composants peuvent être écrits comme un tel que

class Container extends React.PureComponent {
  state = {
    reversed: false,
    newContent: "",
    contents: [
      {
        id: 1,
        text: "Initial Content"
      }
    ]
  };

  handleReverse = () => {
    this.setState((state) => ({
      ...state,
      reversed: !state.reversed
    }))
  }
  submitNewContent = () => {
    this.setState(state => ({
      ...state,
      contents: [
        ...state.contents,
        { id: Math.random(), text: state.newContent }
      ],
      newContent: ""
    }));
  };
  addNewContent = content => {
    this.setState({ newContent: content });
  };

  render() {
    return (
      <React.Fragment>
        <ContentCreator
        value={this.state.newContent}
        handleChange={this.addNewContent}
        handleClick={this.submitNewContent}
        />
        {this.state.reversed ? <ReversedContentDisplayer contents={this.state.contents} /> : <ContentDisplayer contents={this.state.contents} />}
        <Reversifier reversed={this.state.reversed} handleReverse={this.handleReverse}/>
      </React.Fragment>
    );
  }
}

Mais afin de refléter différents scénarios, j'ai créé deux composants distincts

J'ai créé un codesandbox pour vous au cas où vous voudriez jouer avec la fonctionnalité yo voir le résultat final https://codesandbox.io/s / 04rowq150

Ainsi, de cette façon, vous n'avez pas à créer de contenu à l'intérieur du Container , vous pouvez plutôt utiliser Container code > comme ligne directrice en définissant l'état initial et quelques méthodes pour transmettre ses enfants pour leur permettre de créer de nouveaux contenus, et d'afficher ces contenus nouvellement créés au nom du Container

I J'espère que cet échantillon vous aidera comme point de départ et j'espère que je comprends votre exigence au moins 51% correctement. Si vous avez d'autres questions ou confusions, faites-le moi savoir