在 React-Native 中使用粗箭头函数改变 React.Component

Question

是否可以仅使用粗箭头功能将 React.Component 呈现在其他 React.Component 之上，在我的情况下使用状态似乎是不必要的，因为不需要关闭打开的组件。我正在尝试实现最简单的渲染 React.Component 而不是其他 React.Component.

我正在尝试这样做：

<Button onPress={() => { return (<ShowOtherReactComponent/>); }} >Show OtherComponent</Button>

这是在调用 <ShowOtherReactComponent/> 我知道是因为我从 constructor 调用了警报功能但是！没有渲染。这是为什么？我该怎么做？

PS：这个方法可能是错误的，但还是想看看如何实现。为了科学。

Answer 1

你不应该 return jsx 从你的处理程序。通常显示和/或切换组件 conditional rendering 是要走的路。

不是从 onPress 中 returning <ShowOtherReactComponent/>，而是根据绑定到本地状态的 boolean 有条件地渲染组件并改为更改状态。

const Component = () =>{
    const [show, setShow] = useState(false)

    const onPress = () => setShow(true)

    return(
        <>
            <button onPress={onPress}> Show </button>
            { show && <ShowOtherReactComponent/> }
        </>
    )
}

Answer 2

我已经举了一个例子来展示如果你想要一个按钮来添加要显示的组件你可以做什么：

import React from 'react';
import autoBind from 'react-autobind';

export default class ButtonTest extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            extraComponents : []
        };

        autoBind(this);
    }

    addComponent() {
        const newComponent = (<p>I'm a new component</p>);
        this.setState({extraComponents: [...this.state.extraComponents, newComponent]})
    }

    render() {
        return (
            <div>
                <button onClick={this.addComponent}>add component</button>

                {this.state.extraComponent}
            </div>
        )
    }
}

我已经检查过了，它有效。

Answer 3

import React, { useState } from 'react'
import { SafeAreaView, View, Text, Button, Dimensions } from 'react-native'


const App = () => {

    const [visibilityOfOtherView, setvisibilityOfOtherView] = useState(false)
    const { height, width } = Dimensions.get('window')
    const SCREEN_HEIGHT = Math.round(height)
    const SCREEN_WIDTH = Math.round(width)

    return (
        <SafeAreaView style={{ height: SCREEN_HEIGHT, width: SCREEN_WIDTH, }}>

            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'red' }}>
                <Text style={{ marginBottom: 20 }}>
                    First Components
                </Text>
                <Button
                    title='Toggle Components View'
                    onPress={() => setvisibilityOfOtherView(!visibilityOfOtherView)}
                />
            </View>

            {
                visibilityOfOtherView ?
                    <View style={{ height: SCREEN_HEIGHT, width: SCREEN_WIDTH, alignItems: 'center', justifyContent: 'center', backgroundColor: 'green' }}>
                        <Text style={{ marginBottom: 20 }}>
                            Secound Components
                        </Text>
                        <Button
                            title='Toggle Components View'
                            onPress={() => setvisibilityOfOtherView(!visibilityOfOtherView)}
                        />
                    </View>
                    : null
            }

        </SafeAreaView>
    )
}

export default App

在 React-Native 中使用粗箭头函数改变 React.Component

Use fat arrow function to change React.Component in React-Native

javascript

reactjs

react-native

react-native-android