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

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}) => {

  const [showMore, setShowMore] = useState(false);

  return (

    <div>

      <p onClick={() => setShowMore(true)}>info</p>

      {showMore && <More data={data} />}

    </div>

  )}

}

在16.8之前，您需要使用类组件。

class MyComponent extends React.Component {

  state = {

    showMore: false,

  }

  render() {

    return (

      <div>

        <p onClick={() => this.setState({ showMore: true})}>info</p>

        {this.state.showMore && <More data={this.props.data} />}

      </div>

    )}

  }

}