反应-如何打开在功能组件上显示更多？

Question

我有一个功能组件

const text = ({data}) => {

    return (

        <p onClick={()=> render more?}>info</p>

    )}

const more = ({data}) => {

    return (<p>..........</p>)

}

是否可以在onClick事件上呈现更多组件？

Answer 1

当然，您需要一个状态变量。使用状态确定是否渲染更多，然后在发生单击时设置状态。如果您的反应是16.8或更高版本，则可以在带有钩子的功能组件中执行此操作：import { useState } from 'react';const MyComponent = ({data}) => {&nbsp; const [showMore, setShowMore] = useState(false);&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <p onClick={() => setShowMore(true)}>info</p>&nbsp; &nbsp; &nbsp; {showMore && <More data={data} />}&nbsp; &nbsp; </div>&nbsp; )}}在16.8之前，您需要使用类组件。class MyComponent extends React.Component {&nbsp; state = {&nbsp; &nbsp; showMore: false,&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <p onClick={() => this.setState({ showMore: true})}>info</p>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.showMore && <More data={this.props.data} />}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}&nbsp; }}