javascript - 在相邻组件之间共享内容，HOC？

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

1) 可以使用 Redux、mobx 等状态管理系统，也可以使用 React 的 context API https://reactjs.org/docs/context.html。但是，由于您对 React 还很陌生，我建议您在熟悉基本流程之前不要使用这些正确的知识

2）你可以实现一个简单parent-child relationship的在组件之间传递数据。最终，这允许您在相邻（兄弟）组件之间提供通信。正如已经说过的，这种流动通常被称为提升状态。实际上，状态管理系统以类似的方式工作。让我通过考虑基于场景的代码示例来解释这个逻辑。

我们将有一个 Container 组件。该组件将是一个有状态的组件。这个 Container 组件的唯一目的是拥有自己的整体状态，这将被其子组件视为事实的来源。有几种方法来定义更新这种整体状态的方法。子组件将是纯组件或代表性组件。这意味着，他们不会有自己的状态。它们将用于显示其父级传递给它们的数据或触发由其父级定义的方法以更新真实状态源。

我们将有两个场景：在场景 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 函数实际包装它）。而这个组件的主要目的是更新contents我们的真实状态源的key

第二个组件被称为Reversifier（虽然我不相信有这样的词）

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

该组件的主要目的是切换reversed我们的真实状态源的键。您还可以看到，基于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>
  );
}

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

我为你创建了一个代码框，以防你想玩这个功能，你会看到最终结果https://codesandbox.io/s/04rowq150

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

我希望这个示例可以帮助你作为一个起点，我希望我理解你的要求至少 51% 正确。如果您还有其他问题或困惑，请告诉我

javascript - 在相邻组件之间共享内容，HOC？

问题描述

解决方案

推荐阅读