更改列表中“切换”元素的样式，本地反应

Question

我在更改列表中只有一个元素的样式时遇到了麻烦。下面是我的Main类，以及StationDetails类，它是我创建的用于逐个呈现列表元素的组件。

在qazxsw poi中有一条线（第31行）我似乎无法弄清楚问题。我想根据元素的ID是否包含在qazxsw poi列表中来设置组件的样式。

这是一行：

StationDetails

这是我的activeStations课程

 style={activeStations.includes(stations.id) ? pressedStyle : buttonStyle}

这是我的Main组件。

import React, { Component } from "react"
import axios from "axios"
import { Text, View, ScrollView } from "react-native"
import StationDetails from "./StationDetails"

class Main extends Component {
  constructor(props) {
    super(props)
    this.state = { stations: [], pressStatus: false, activeStations: [] }
    this.handleClick = this.handleClick.bind(this)
  }

  componentWillMount() {
    axios
      .get("https://api.citybik.es/v2/networks/trondheim-bysykkel")
      .then(response =>
        this.setState({ stations: response.data.network.stations })
      )
  }

  handleClick() {
    this.setState({ pressStatus: !this.state.pressStatus })
  }

  renderStations() {
    return this.state.stations.map(stations => (
      <StationDetails
        activeStations={this.state.activeStations}
        handleClick={this.handleClick}
        pressStatus={this.state.pressStatus}
        key={stations.id}
        stations={stations}
      >
        {stations.name}
      </StationDetails>
    ))
  }

  render() {
    return (
      <ScrollView style={{ flex: 1, marginTop: 20 }}>
        {this.renderStations()}
      </ScrollView>
    )
  }
}

export default Main

Answer 1

你试图从StationDetails设置

import React from "react"
import { Text, View } from "react-native"
import Card from "./felles/Card"
import CardSection from "./felles/CardSection"
import Button from "./felles/Button"

const StationDetails = ({
  stations,
  handleClick,
  pressStatus,
  activeStations
}) => {
  const {
    headerTextStyle,
    leftPartStyle,
    rightPartStyle,
    pressedStyle,
    buttonStyle
  } = styles

  return (
    <Card style={{ flex: 1, flexDirection: "row" }}>
      <CardSection style={leftPartStyle}>
        <Text style={headerTextStyle}>
          {stations.name}
        </Text>
        <Text>
          Free bikes: {stations.free_bikes}
        </Text>
      </CardSection>
      <CardSection style={rightPartStyle}>
        <Button
          onPress={() => {
            if (!activeStations.includes(stations.id)) {
              activeStations.push(stations.id)
            } else {
              activeStations.splice(activeStations.indexOf(stations.id), 1)
            }
          }}
          style={
            activeStations.includes(stations.id) ? pressedStyle : buttonStyle
          }
        >
          Abonner
        </Button>
      </CardSection>

    </Card>
  )
}

const styles = {
  textStyle: {
    fontSize: 14
  },
  leftPartStyle: {
    flex: 3,
    flexDirection: "column",
    justifyContent: "space-between"
  },
  rightPartStyle: {
    flex: 1
  },
  pressedStyle: {
    backgroundColor: "green"
  },
  headerTextStyle: {
    fontSize: 18
  },
  thumbnailStyle: {
    height: 50,
    width: 50
  },
  buttonStyle: {
    backgroundColor: "#fff"
  }
}

export default StationDetails

的状态，这是不可取的。很少有事情要记住

• 主要的Main.activeStations处于本地组件级别状态。
• 你不应该试图从子组件中改变它。
• 由于您从StationDetails将变异的qazxsw poi状态分配给qazxsw poi，因此React Native（RN）在其对帐过程中找不到状态差异，因此不会重新渲染activeStations。
• 我们需要RN重新渲染activeStations，以便它显示按钮等的正确样式。
• 有关Main.activeStations的文档

我就是这样做的

• 让StationDetails渲染StationDetails
• 从StationDetails获取一个回调选择的回调
• 让setState负责改变它自己的内部状态（Main）

通过这样做，

• StationDetails只负责渲染道具列表，而不是其他任何东西。这是一个愚蠢的组件，呈现一个列表。
• StationDetails负责处理它自己的内部状态

下面是结果：

Main类

activeStations

StationDetails类

Main