javascript - react - 如何在功能组件上打开显示更多内容？

Question

我有一个功能组件

const text = ({data}) => {
    return (
        <p onClick={()=> render more?}>info</p>
    )}

const more = ({data}) => {
    return (<p>..........</p>)
}

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

Answer 1

当然，你需要一个状态变量。使用状态来决定是否渲染更多，然后设置点击发生时的状态。如果您有 react 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>
    )}
  }
}