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

问题描述

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

在我的父组件中，我有一个状态属性 (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 的值。反应本机错误消息

以下是两者的完整文件：

应用程序.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>
		);
	}
}

按钮.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;

标签： javascriptreactjsreact-native

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

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

问题描述

解决方案

推荐阅读