如何将状态从父视图传递给子视图？

Question

MyPinchZoomView具有状态“缩放”。 在下面的设置中，组件“面板”如何跟踪当前比例？

 render() {
      return (
        <MyPinchZoomView
          minScale={0.9}
          maxScale={2}
          >
          { this.board }
        </MyPinchZoomView>
      )
  }

同一个问题，如果我要在板组件中添加MyPinchZoomView ：

 return (
      <View>
      <MyPinchZoomView
          minScale={0.9}
          maxScale={2}
          >
          { this.fields }
          { this.rackFields }
          { this.figures }
    
      </MyPinchZoomView>


      <Toolbar board={this} figures={this.figures}></Toolbar>
      <Text>{this.state.lastRefresh}</Text>
      <Moves game={this.props.game} lastRefresh={this.state.lastRefresh}/>
      <FlashMessage position="top" ref="errorMessage" />
      </View>
    )
  }

Answer 1

您可以将scale用作函数参数，即this.board(scale)，也可以将组件直接用作子元素：

<Board
  scale={scale}
/>

Answer 2

宁可传递完整状态（不推荐）

将值作为道具传递 例如

<Tags items={["tag1", "tag2"]} />

然后在您的子组件中

Object.keys(props).map(prop => props[prop]) // Do something with the prop