Question

假设我有三个组成部分：App，Block和BlockOptions。

App有一个名为blocks的数组，其中包含所有块组件。这些块被渲染在某种画板中。因为每个块都可以修改，所以我希望BlockOptions可以在选择Block时充当属性面板。 Block应该可以从那里进行修改。请记住，BlockOptions位于完全不同的位置。

App.js：

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      artboardSize: {
        width: 300,
        height: 200
      },
      blocks: []
    }
  }
  // App component contains several methods that change the blocks array, like this one
  addBlock(width, height) {
    const newBlock = {
      width: width,
      height: height
    }

    this.setState(prevState => ({
      blocks: [...prevState.blocks, newBlock]
    }));
  }
  render() {
    return (
      <GlobalContext.Provider value={this}>
        <div className="app">
          <Artboard /> // Where all Blocks go
          <Sidebar /> // Where BlockInfo goes
        </div>
      </GlobalContext.Provider>
    )
  }
}

如上所述，我正在使用Context API来使所有组件访问App的状态和方法。因此，例如，如果单击页面上某处的按钮，则该组件将调用App的{{1}}方法来创建新块。

这是我目前在addBlock()中渲染每个块的方式：

Artboard

在Block.js中，当用户单击一个块时，我想将{context.state.blocks.map((block, key) => ( <Block key={key} width={block.width * context.scale} height={block.height * context.scale} /> ))}的{{1}}的块数组更改为App：

selected

但是我不能。我可以在 {strong> true之内更新状态，但不能在整个应用本身中更新状态。我该怎么办？

我对React很陌生。因此，也许我不知道使用Context API不适合。也许我的整个思维方式都弄糟了。也许有更好的方法来解决这个问题？

基本上是我要做什么： 具有一组彼此不同的组件，可以从某种“选项面板”中进行更改。每个块都不同，因此此面板应根据所选块的状态而变化。

Answer 1

无论您决定使用上下文，约简还是状态，都需要将一个函数传递给块组件，顶层组件将调用该函数来更新值，并将其传递给子代。

如果要使用上下文，可以将值更改为：

<GlobalContext.Provider value={{ blocks: this.state.blocks, addBlock: this.addBlock }} >

这样，上下文的任何使用者不仅可以访问这些块，而且还可以调用该函数为应用程序中的其他任何使用者进行更新。

{context.blocks.map((block, key) => <Block ... onAdd={context.addBlock} />)}

在该块内：

handleOnClick() {
  this.setState ...
  this.props.onAdd();
}

React-使用Context API通过另一个组件更改多个单独的组件

1 个答案: