Question

我创建了以下组件：

type ToggleButtonProps = { title: string, selected: boolean }
export default class ToggleButton extends Component<ToggleButtonProps>{
    render(){
        return (
            <TouchableWithoutFeedback {...this.props}>
                <View style={[style.button, this.props.selected ? style.buttonSelected : style.buttonDeselected]}>
                    <Text style={[style.buttonText, this.props.selected ? style.buttonTextSelected : style.buttonTextDeselected]}>{this.props.title}</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

样式是简单的颜色定义，可以直观地指示是否选择了按钮。从父组件调用（项目是我的对象）：

item.props.selected = true;

我已经设置了一个断点，并验证了它是否被命中，item.props确实是我的物品具有selected属性的道具，它实际上从false变为{{1 }}。

但是，视觉上没有任何变化，也没有true或render()受到孩子的呼唤。

当道具改变时，我该怎么做使孩子渲染？（我使用的是React Native 0.59.3）

Answer 1

您不能通过逐字地分配以下道具来更新子组件：

item.props.selected = true;

但是，有很多方法可以重新渲染子组件。但是我认为下面的解决方案将是最简单的解决方案。

您想要一个容器或智能组件，它将每个切换按钮的状态或数据保存在一个位置。因为很有可能，此组件可能需要调用api来发送或处理该数据。

如果固定了切换按钮的数量，则可以简单地设置如下状态：

state = {
  buttonOne: {
    id: `buttonOneId`,
    selected: false,
    title: 'title1'
  },
  buttonTwo: {
    id: `buttonTwoId`,
    selected: false,
    title: 'title2'
  },
}

然后在父级中创建一个方法，该方法将由每个子组件操作onPress调用：

onButtonPress = (buttonId) => {
  this.setState({
    [buttonId]: !this.state[buttonId].selected // toggles the value
  }); // calls re-render of each child
}

在render方法中将相应的值传递给每个孩子作为道具：

render() {
  return (
     <View>
       <ToggleButton onPressFromParent={this.onButtonPress} dataFromParent={this.state.buttonOne} />
       <ToggleButton onPressFromParent={this.onButtonPress} dataFromParent={this.state.buttonTwo} />
       ...

最终每个孩子都可以使用道具：

  ...
  <TouchableWithoutFeedback onPress={() => this.props.onPressFromParent(this.props.dataFromParent.id)}>
    <View style={[style.button, this.props.dataFromParent.selected ? style.buttonSelected : style.buttonDeselected]}>
  ...

我故意离开了title字段，供您尝试实施。

P.S：您应该能够遵循这些代码，因为它们只是JS或JSX。

我希望这会有所帮助:)

Answer 2

因为如果父母的道具改变了，但是如果它的状态改变了，孩子就不会放弃：）

将子级的属性“ key”更新为“ selected”（基于reactjs tho的示例）

Child {
  render() {
    return <div key={this.props.selected}></div>
  }
}

React Native无法根据道具更改进行渲染

2 个答案: