有几种方法可以解决这个问题

1） 您可以使用状态管理系统，如Redux、mobx，也可以使用React的上下文APIhttps://reactjs.org/docs/context.html.然而，由于您对反应还比较陌生，我建议在您熟悉基本流程之前不要使用这些正确的“知道”

2） 您可以实现一个简单的父子关系，以便在组件之间传递数据。最终，这允许您在相邻（同级）组件之间提供通信。如前所述，该流通常称为提升状态。实际上，国家管理系统的工作方式与此类似。让我通过考虑基于场景的代码示例来解释这个逻辑。

我们将有一个容器组件。该组件将是有状态组件。这个容器组件的唯一目的是拥有它自己的整体状态，这将被它的子元素视为真理的来源。有几个方法来定义更新这种整体状态的方法。子组件将是纯组件或表示组件。也就是说，他们不会有自己的国家。它们要么用于显示其父级传递给它们的数据，要么触发其父级定义的方法，以更新真相状态的来源。

我们将有两个场景：在场景1中，内容列表将按原样表示。在场景2中，内容列表将通过颠倒字母顺序来表示

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>
    );
  }
}

如您所见，容器只有一个状态，一些更新状态和子组件的方法。在其渲染方法中没有使用任何html。

我们的第一个子组件是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>
  );
}

这个组件的行为就像一个表单（我懒得用表单和onSubmit函数来包装它）。该组件的主要目的是更新真理之源状态的内容键

第二个组件叫做反向器（不过我不相信有这样一个词）

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

此组件的主要目的是切换真实源状态的反向键。您还可以看到，根据reversed的值，按钮内部的文本也会发生变化（以不同的方式反映不同的场景）

最后两个部分是

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>
  );
}

根据场景，即在容器组件的渲染方法内部或容器组件的渲染方法中，是否将内容显示为常规内容或反转内容，我们将显示其中任何一种。实际上，这两个组件可以写成一个，比如

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>
  );
}

但为了反映不同的场景，我创建了两个不同的组件

我为您创建了一个codesandbox，以防您想使用它的功能看到最终结果https://codesandbox.io/s/04rowq150

因此，通过这种方式，您不必在容器内创建任何内容，而是可以使用容器作为指导原则，通过定义初始状态和几个方法传递其子级以允许它们创建新内容，并代表容器显示这些新创建的内容

我希望这个例子能帮助你作为一个起点，我希望我理解你的要求至少51%的权利。如果您有进一步的问题或困惑请让我知道