Question

假设有2个React Native组件＆lt;父＆GT;和＆lt; StarRating＆GT;

＆LT;父＆GT;是在其状态下保持评级值（从1到5）的容器。

＆LT; StarRating＆GT;是一个根据收到的道具＆＃34;评级＆＃34;呈现星图像的组件。或者根据点击的星号。

＆LT; StarRating＆GT;看起来像这样：

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

如果＆lt; StarRating＆GT;收到新的道具＆＃34;评级＆＃34;它的渲染功能会自动调用新道具，一切正常，我们会看到更新的星星图像。

每颗星都包裹着＆lt; TouchableOpacity＆GT;元素和我应该做什么如果我点击一些星和＆lt; StarRating＆GT;应该用新的星数来重新渲染。在这种情况下，我无法改变＆＃34; this.props.rating＆＃34;里面＆lt; StarRating＆GT;直接（见上文*）。我想我必须在＆lt;中使用setState（） StarRating＆GT;但是如何＆lt; StarRating＆GT;可以理解渲染应该是哪种方式......根据新的状态或新收到的道具？我的意思是如何在Render函数中确定是否收到了新的道具或点击生成？

看起来像＆lt; StarRating＆GT;应该有两种方式更新自己的明星：

通过父母的新道具。
点击内部的星星。

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

感谢。

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状态将来很容易扩展功能。

如何在React Native中根据运行时收到的道具更新状态？

2 个答案: