javascript - 读取父状态的值并将 bool 值传递给子组件React

我在学习如何在React Native中在父子之间传递数据时遇到了麻烦。

在我的父组件中，我有一个state属性（audioPlaying），它是一个布尔值。

state = {
    //The title informs the Button and TitleArea components
    title: 'hello',
    audioPlaying: false,
};

我想按一下按钮（onPress）来更改该值。

<Button
    title={this.state.title}
    onPress={this.playPauseHandler}
    audioPlaying={this.state.audioPlaying}
/>

...通过调用playPauseHandler。

playPauseHandler = () => {
    this.setState(prevState => ({
        audioPlaying: !prevState.audioPlaying
    }));
}

然后在我的孩子（按钮）组件中，我要评估audioPlaying状态属性。如果是真的，我想展示一件事，而假的我想展示另一件事。

<View style={styles.playBtnStyle}>
    {this.props.audioPlaying === false ? (
        <MaterialIcons
            name='play-arrow'
            size={50}
            color="#87888C"
        />
        ) : (
        <MaterialIcons
            name='pause'
            size={50}
            color="#87888C"
        />
        )}
    }
</View>

但是，当我运行它时，我无法获得audioPlaying的值。
React Native Error Message

这是这两个文件的完整文件：

App.js

import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';

import Carousel from './src/components/Carousel/Carousel';
import Button from './src/components/Button/Button';
import TitleArea from './src/components/TitleArea/TitleArea';
import MapArea from './src/components/MapArea/MapArea';

const styles = {
	container: {
		flex: 1,
		justifyContent: 'space-between',
	},
	playArea: {
		flex: 1,
	},
};

export default class App extends Component {
	state = {
		//The title informs the Button and TitleArea components
		title: 'hello',
		audioPlaying: false,
	};

	playPauseHandler = () => {
		this.setState(prevState => ({
			audioPlaying: !prevState.audioPlaying
		}));
	}

	render() {
		return (
			<View style={styles.container}>
				<TitleArea title={this.state.title} />
				<StatusBar hidden={false} />
				<Carousel />
				<MapArea />
				<Button
					title={this.state.title}
					onPress={this.playPauseHandler}
					audioPlaying={this.state.audioPlaying}
				/>
			</View>
		);
	}
}

Button.js

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, Dimensions } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const { width } = Dimensions.get('window');
const height = width * 0.2;
const styles = {
	textStyle: {
		color: '#87888C',
		fontSize: 18,
		fontWeight: '600',
		backgroundColor: 'white',
		alignSelf: 'center',
	},
	buttonContainer: {
		height,
		flexDirection: 'row',
		backgroundColor: 'white',
		alignItems: 'center',
	},
	playBtnStyle: {
		marginLeft: 50,
		backgroundColor: 'white',
	},
	childStyle: {
		flex: 1,
	},
};

const button = (props) => {
	return (
		<View style={styles.buttonContainer}>
			<TouchableOpacity>
				<View style={styles.playBtnStyle}>
					{this.props.audioPlaying === false ? (
						<MaterialIcons
							name='play-arrow'
							size={50}
							color="#87888C"
						/>
					 ) : (
						<MaterialIcons
							name='pause'
							size={50}
							color="#87888C"
						/>
					 )}
					}
				</View>
			</TouchableOpacity>

			<View style={styles.childStyle}>
				<Text style={styles.textStyle}>Chapter 1: {props.title}</Text>
			</View>
		</View>
	);
}

export default button;

最佳答案

按钮的上下文中没有this。那只是一个返回JSX的函数。
而是使用props

<View style={styles.playBtnStyle}>
  {props.audioPlaying === false ? (
    <MaterialIcons
      name='play-arrow'
      size={50}
      color="#87888C"
    />
  ) : (
    <MaterialIcons
      name='pause'
      size={50}
      color="#87888C"
    />
  )}
</View>