在React.js中自定义阅读更多

Question

如您所见，“ + Las mor”是一个“查看更多”按钮，单击该按钮可展开上面写的整个段落。 我需要React代码才能使其正常运行。任何帮助将不胜感激。 我还附有将在其上应用此功能的代码。

<section id="section-2">
 <h4>Om mig</h4>
 <p className="para">
  {about} 
 </p>
</section>
<p style={{color:'#d39176'}}>
 <img src={plus1} />
 Läs mer
</p> 

Answer 1

您可能想要一个按钮来切换扩展文本onClick的状态。按下按钮后，您将状态设置为相反状态。这是我用React和Reactstrap编写的一个工作示例。我只是在本地测试。以下是您将看到的视频演示：https://screencast.com/t/in5clDiyEcUs

import React, { Component } from 'react'
import { Container, Button } from 'reactstrap'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      expanded: false //begin with box closed
    }
  }

  //function that takes in expanded and makes it the opposite of what it currently is
  showButton = () => { 
    this.setState({ expanded: !this.state.expanded })
  }

  render() {
    const { expanded } = this.state
    return (
      <Container style={ { justifyContent: 'center', alignItems: 'center' } }>
        <div>Always visable text.</div>
        <Button onClick={ this.showButton }>Expand</Button>
        { 
          expanded && //show if expanded is true
          <div>Extended Text Here</div>
        }
      </Container>
    )
  }
}

export default App