如何根据 React Native 运行时收到的 props 更新状态？

Question

假设有 2 个 React Native 组件 和 。

是保持评级值（从 1 到 5）处于其状态的容器。

是一个组件，它根据收到的道具“评级”或根据点击的星星来渲染星星图像。

看起来像这样：

class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      rating:5
    }
  }

  render() {
    return (
      <StarRating rating={this.state.rating}></StarRating>
    )
  }
}

class StarRating extends Component {

  _generateStars(rating) { ... }; //return an array with JSX rect components 
                                  //according to "rating" prop (e.g. 1,2..5). 
                                  //Each component is the star image...

  render() {

  stars = this._generateStars(this.props.rating); // *

    return (
      <View>
        {stars}
      </View>
    )
  }
}

如果 收到新的道具“评级”，它的渲染函数会自动调用新道具并且一切正常，我们会看到更新的星星图像。

包裹到 元素的每颗星以及 我应该怎么做 如果我点击某个星并且 应该用新的星数重新渲染自身。在这种情况下，我不能直接在 中更改“this.props.rating”（参见上面的 *）。我想我必须在 中使用 setState() 但是 如何理解 Render 应该采用哪种方式...根据新状态或新收到的道具？我的意思是如何在渲染功能中确定是收到新道具还是点击生成？

看起来 应该有两种方法来更新自己的星星：

1. 通过父级的新道具。

2. 通过点击自身内部的星星。

在这种情况下应该采取什么方法？

谢谢。

Answer 1

我会让StarRating 管理这个状态，但你的方法也是可行的，具体取决于具体情况。

您可以通过您的父级传递updateRating 函数，然后您可以从 StarRating 控制评级，而无需将状态移动到其中。

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rating:5
    }
  }

  render() {
    return (
      <StarRating rating={this.state.rating} 
        updateRating={(rating) => this.setState({rating})} 
        />
    )
  }
}

class StarRating extends Component {

  _generateStars(rating, updateRating) {
      // Generate stars with custom onPress
      // <Star onPress={() => updateRating(starIndex)} />
  }

  render() {

  stars = this._generateStars(this.props.rating, this.props.updateRating); // *

    return (
      <View>
        {stars}
      </View>
    )
  }
}

Answer 2

我猜你困惑的是谁应该控制rating的状态（表示不同的星图）。

我认为父组件应该控制这个状态，因为子组件（StarRating）只是一个视图反映rating的状态，他并不关心这个状态是什么意思，谁应该关心这个状态的含义是他的父母（父母）。

另外，控制父级中的所有子级rating 状态便于将来扩展功能。