Javascript 更改另一个组件中的状态

我正在尝试获取要在我的子组件中使用的变量

heartIconColor

。但是我犯了一个错误。如何将此变量设置为图标的颜色

ReferenceError:找不到变量：heartIconColor

我的app.js

export default class Home extends Component {
  constructor(props){
    super(props);
    this.state = {
      liked: false
    }
  }
  likePost = (author, id) => {
    alert("Liked!!" + author + id)
    this.liked()
  }
  liked(){
    this.setState({
      liked: !this.state.liked
    })
  }
  renderItem = ({ item, index }) => {
    return (
      <Post
        like={this.likePost} 
        liked={this.state.liked}
      />
    )
  }
  render() {
    const heartIconColor = this.state.liked ? "red" : null;
    return (
     <FlatList data={this.state.getData} renderItem={this.renderItem}>
     </FlatList>
    )
  }

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
喜欢：错
}
}
likePost=（作者，id）=>{
警报（“喜欢！！”+作者+id）
这个
}
喜欢{
这是我的国家({
喜欢：！this.state.liked
})
}
renderItem=（{item，index}）=>{
返回(
)
}
render（）{
const heartIconColor=this.state.liked？“红色”：null；
返回(
)
}

我的组成部分：

const Post = (props) => {
const styles = StyleSheet.create({
heartIcon: {
      fontSize: 20,
      color: heartIconColor,
    }
})
return (
<View style={styles.flex}>
          <Text><Icon onPress={() => onClick={this.props.like}} style={styles.heartIcon} type="Octicons" name="heart" /></Text>
</View>
)
}
export { Post };

  renderItem = ({ item, index }) => {
  const heartIconColor = this.state.liked ? "red" : null;
    return (
      <Post
        like={this.likePost} 
        liked={this.state.liked}
        iconColor={heartIconColor}
      />
    )
  }

const Post=（道具）=>{
const styles=StyleSheet.create({
心脏图标：{
尺寸：20，
颜色：heartIconColor，
}
})
返回(
onClick={this.props.like}}style={styles.heartIcon}type=“Octicons”name=“heart”/
)
}
出口{Post}；

您可以根据需要获得图标颜色

const styles = StyleSheet.create({
heartIcon: {
      fontSize: 20,
      color: props.liked ? "red" : null,
    }
})

---

您可以按以下方式获取图标颜色：

const styles = StyleSheet.create({
heartIcon: {
      fontSize: 20,
      color: props.liked ? "red" : null,
    }
})

---

只需将props iconColor从State传递到Post组件：

const Post = (props) => {
const styles = StyleSheet.create({
heartIcon: {
      fontSize: 20,
      color: heartIconColor,
    }
})
return (
<View style={styles.flex}>
          <Text><Icon onPress={() => onClick={this.props.like}} style={styles.heartIcon} type="Octicons" name="heart" /></Text>
</View>
)
}
export { Post };

  renderItem = ({ item, index }) => {
  const heartIconColor = this.state.liked ? "red" : null;
    return (
      <Post
        like={this.likePost} 
        liked={this.state.liked}
        iconColor={heartIconColor}
      />
    )
  }

---

只需将props iconColor从State传递到Post组件：

const Post = (props) => {
const styles = StyleSheet.create({
heartIcon: {
      fontSize: 20,
      color: heartIconColor,
    }
})
return (
<View style={styles.flex}>
          <Text><Icon onPress={() => onClick={this.props.like}} style={styles.heartIcon} type="Octicons" name="heart" /></Text>
</View>
)
}
export { Post };

  renderItem = ({ item, index }) => {
  const heartIconColor = this.state.liked ? "red" : null;
    return (
      <Post
        like={this.likePost} 
        liked={this.state.liked}
        iconColor={heartIconColor}
      />
    )
  }

---

将

heartIconColor

作为道具传递到您的

Post

组件中？@CodyCaughlan是的，正确！更改标题。这是一个简单的一般反应规则：若你们希望某个东西（值或方法）在child中可用，那个么就把它作为道具传递。写下问题的第一句话后，你应该知道该怎么做。将

heartIconColor

作为道具传递到你的

Post

组件中？@CodyCaughlan是的，正确！更改标题。这是一个简单的一般反应规则：若你们希望某个东西（值或方法）在child中可用，那个么就把它作为道具传递。在写下问题的第一句话后，你应该知道该怎么做。