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

Question

是否可以仅使用粗箭头函数在其他 React.Component 上渲染 React.Component，在我的情况下使用 state 似乎没有必要，因为不需要关闭打开的组件。我试图实现在其他 React.Component 上渲染 React.Component 的最简单方法。

我正在尝试这样做：

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

这是调用<ShowOtherReactComponent/>我知道的，因为我从 constructor 但是调用了一个警报函数！什么都没有渲染。这是为什么？我怎样才能做到这一点？

PS：这种方法可能是错误的，但仍然想看看它是如何做到的。为科学。

Answer 1

你不应该jsx从你的处理程序返回。通常显示和/或切换组件条件渲染是要走的路。

而不是<ShowOtherReactComponent/>从onPress你那里返回，有条件地渲染基于boolean绑定到本地状态的组件并改为更改状态。

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

    const onPress = () => setShow(true)

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