Reactjs 如果模态为'；什么是可见度道具重装机？

我有一个包含四个不同项目列表的组件。项目根据日期放置在列表中。当用户单击按钮更改该项目的日期时，会出现一个带有日期选择器的模式（该项目的DateModalVisibility属性切换为true）。这与预期一样有效，但如果项目的日期更改导致其切换列表，则日期选择器模式将消失，而道具不会切换为false。然后，当您单击按钮重新打开时，它将切换为false，然后再次按下按钮后，将切换回true并重新打开。我相信这是由于当项目切换到另一个列表时，该项目的重新登录造成的

我想强制模态保持打开，即使它切换列表。我尝试过在其他任何渲染之前调用不同的list函数，但这并没有解决问题。我没有主意，也不确定这是否可行

我的平面列表（this.props.todos来自redux）：

{
返回项目.日期；
})}
extraData={this.props.todos}
keyExtractor={item=>item.id.toString（）}
renderItem={（{item}）=>{
if（moment（）.isname（item.date，'day'））{
返回(
this.props.removeTodo（项目）}
/>
);
}
}}
/>
明天
{
返回项目.日期；
})}
extraData={this.props.todos}
keyExtractor={item=>item.id.toString（）}
renderItem={（{item}）=>{
如果(
力矩（）
.添加（1，“天”）
.IsName（item.date，'day'）
) {
返回(
this.props.removeTodo（项目）}
/>
);
}
}}
/>
即将到来的
{
返回项目.日期；
})}
extraData={this.props.todos}
keyExtractor={item=>item.id.toString（）}
renderItem={（{item}）=>{
如果(
力矩（）
.添加（1，“天”）
.isBefore（item.date，“day”）
) {
返回(
this.props.removeTodo（项目）}
/>
);
}
}}
/>
在某时
{
返回项目.日期；
})}
extraData={this.props.todos}
keyExtractor={item=>item.id.toString（）}
renderItem={（{item}）=>{
if（moment（）.isAfter（item.date，'day'）| | item.date==null）{
返回(
this.props.removeTodo（项目）}
/>
);
}
}}
/>

todoItem组件：

class TodoItem extends Component {
  render() {
    const todoItem = this.props.todoItem;

    return (
      <View>
        <ItemSwipeRow item={todoItem} completeItem={this.props.deleteTodo}>
          <TouchableHighlight
            onPress={() => this.props.toggleItemMenu(todoItem)}
            underlayColor={null}>
            <ListItem
              containerStyle={styles.todoItem}
              contentContainerStyle={styles.contentStyle}
              title={todoItem.text}
              titleStyle={{ color: '#FCEFEF', fontSize: 16 }}
              rightElement={todoItem.date ? this.renderDate.bind(this)() : null}
            />
          </TouchableHighlight>
        </ItemSwipeRow>
        {todoItem.itemMenuToggled ? <ItemMenuBar item={todoItem} /> : null}
        {this.props.reminderToggleActive && todoItem.date ? (
          <ReminderToggleButtons item={todoItem} />
        ) : null}
        <NotesModal item={todoItem} />
        {todoItem.dateModalVisible ? <DatePickerModal item={todoItem} /> : null}
      </View> //this line above is responsible for displaying the date picker modal
    );
  }
}

类TodoItem扩展组件{
render（）{
const todoItem=this.props.todoItem；
返回(
this.props.toggleItemMenu（todoItem）}
underlayColor={null}>
{todoItem.itemMenuToggled？：null}
{this.props.rementerTogCollective&&todoItem.date(
)：null}
{todoItem.dateModalVisible？：null}
//上面的这一行负责显示日期选择器模式
);
}
}

和DatePickerModel：

class DatePickerModal extends Component {
  render() {
    return (
      <Modal transparent animationType="fade" visible>
        <View style={styles.containerStyle}>
          <View style={styles.modalContainer}>
            <View style={{ justifyContent: 'flex-end', flexDirection: 'row' }}>
              <View style={{ padding: 5 }}>
                <Feather
                  name="x-square"
                  size={35}
                  color={'#db5461'}
                  onPress={() => this.props.toggleDateModal(this.props.item)}
                />
              </View>
            </View>
            <View style={{ padding: 5 }}>
              {Platform.OS === 'ios' ? (
                <IosDatePicker item={this.props.item} />
              ) : (
                <AndroidDatePicker />
              )}
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

类DatePickerModel扩展组件{
render（）{
返回(
this.props.toggleDateModal（this.props.item）}
/>
{Platform.OS==='ios'(
) : (
)}
);
}
}

---

我可以提供打开项目的操作和按钮，但我认为这不是问题的根源。按钮/操作正在正常工作。

我将重新安排您使用模式的方式。不是每个组件都有一个模态，而是向顶层组件添加一个模态，然后使用道具设置所选的项目。像这样的事情：

导出默认类TopComponent扩展React.Component{
此.state={
selectedItem:null，
modalvisible:错误，
}
渲染=（）=>{
返回(
（this.setState（{selectedItem:item，modalVisible:true}））}/>
this.state.selectedItem
}
}

在模式打开时阻止重新渲染有意义吗？然后在模式关闭时允许重新渲染。这会导致列表在模式关闭前不更新，但如果没有问题，则可能会更新。您的最佳选择。（使用componentedShouldUpdate生命周期方法）。有趣的是，我会研究它，让你知道它是否有效。谢谢。我唯一的问题是，既然模态可见性道具在每个项目中，组件shoulldupdate将在平面列表中，我不是必须检查列表中的每个元素，看看它们的可见性元素是否为真以防止更新吗？或者我可以创建一个全局变量每次打开时都可以为true，然后使用它？当模态关闭时将其设为false？我将做什么…而不是每个项都有一个模态本身…而是在包含列表的组件上呈现一个模态，然后这些项将仅通过道具操纵模态。这样，您就不需要多个模态le呈现。只有1个顶层模式可以更改内容。它是否需要位于顶层？如果我可以在每个项目中执行此操作，则会更容易，因为触发模式的按钮位于每个项目中。您只需传递一个属性（如我的示例中的onItemSelected）按钮调用以触发模式。显然，您可以将其保留在renderItem中，但这正是导致您现在出现问题的原因。当列表更改时，这些项将重新渲染，这将终止模式。如果模式更高，则不会发生这种情况。好的，这是有意义的。因此，我有列表，然后是渲染项。在e的内部每个项目，都有一个滑动行组件，其中包含他们将按下以触发模式的按钮。我如何使用onItemSelected来传递该按钮，并在孙辈中按下该按钮时使正确项目的模式可见？抱歉，这是我真正不明白该怎么做的部分。我添加了一个codesandbox来显示我所做的我的意思是说更多的细节。我得到了一个错误，那就是

class DatePickerModal extends Component {
  render() {
    return (
      <Modal transparent animationType="fade" visible>
        <View style={styles.containerStyle}>
          <View style={styles.modalContainer}>
            <View style={{ justifyContent: 'flex-end', flexDirection: 'row' }}>
              <View style={{ padding: 5 }}>
                <Feather
                  name="x-square"
                  size={35}
                  color={'#db5461'}
                  onPress={() => this.props.toggleDateModal(this.props.item)}
                />
              </View>
            </View>
            <View style={{ padding: 5 }}>
              {Platform.OS === 'ios' ? (
                <IosDatePicker item={this.props.item} />
              ) : (
                <AndroidDatePicker />
              )}
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}