Question

如何通过单击React js页面中的按钮来更改文本内容？

我计划对内容进行分类，但是我内部有5个独立的组件，我不知道如何简化

这是我的根js代码

import React from 'react'
import ReactDOM from 'react-dom'
import '../../../translation/index'
import Benefit from './benefit.component'
import Partners from './partners.component'
import SeoContent from './seo.component'

function FinanceProductLanding () {
    return (
        <React.Fragment>
            <Benefit />
            <Partners />
            <SeoContent />
        </React.Fragment>
    )
}

ReactDOM.render( <FinanceProductLanding/>, document.getElementById('finance-product') )

每个组件包含2个类别的内容，如果单击“此”按钮，将显示一个类别，如果单击“那个”按钮，则应更改内容。目前，该页面是使用angularjs构建的，我使用document.getElementById（）更改了文本。我该如何使用React js做同样的事情？

Answer 1

为包含这5个组件的组件添加状态。点击事件会更改状态，文本内容也会更改。

+----------+
| Top Comp | state: { text: '' }
+----------+
     |
     |         +--------------+
     +---------| Display Comp | <label>{ this.state.text }</label>
     |         +--------------+
     |
+----------+
|  Button  | onClick() => this.setState({ text: 'Your text' })
+----------+

Answer 2

根据您的解释，我认为您要做的就是通过单击按钮来隐藏或取消隐藏组件。我尝试达到this之类的效果，请告诉我您是否需要更少或更多的东西

我有一个带有5个组件的React js页面。我想通过单击按钮来更改文本内容。我该怎么做？

2 个答案: