在基于类的组件中更新React页面而不使用useState。
P粉739886290
P粉739886290 2023-08-03 21:16:09
[React讨论组]
<p>我正在使用React的基于类的组件来首先显示所有的令牌。然后,我想要同时显示两个带有spanid的文本,不考虑顺序,使用上一个和下一个按钮来重新渲染页面。重新渲染页面将有 n*(n-1) 种可能性。这是因为第一个带有spanid的文本将与第二个带有另一个spanid的文本配对,直到第n-1个带有spanid的令牌。对于带有spanid的n个文本,可以使用上一个/下一个按钮重新渲染页面n*(n-1)次。由于我正在使用React的基于类的组件编写代码,我不确定如何像在函数式设置中那样使用useState和props来处理这个问题。非常感谢任何关于此问题的帮助。</p> <pre class="brush:php;toolbar:false;">import React from 'react'; import './App.css'; const record = [ { "tid": 1, "token_text": "Canis Familiaris", "spanid": 1, "label": "Name" }, { "tid": 2, "token_text": "is" }, { "tid": 3, "token_text": "the" }, { "tid": 4, "token_text": "scientific name", "spanid": 2, "label": "name type" }, { "tid": 5, "token_text": "of" }, { "tid": 6, "token_text": "dog", "spanid": 3, "label": "species" }, { "tid": 7, "token_text": "." } ]; class Relation extends React.Component { const input_tokens = record; var cntr = 200; input_tokens.forEach(tk =&gt; { const span = tk['spanid']; if (!tk['spanid']) { tokens_to_render.push( &lt;div key= {`id${cntr}`} &gt; &lt;div id = {`label${cntr}`} className='no-label' key={tk.tid}&gt;--&lt;/div&gt; &lt;div key={cntr} id = {`span${cntr}`} index={tk['spanid']} &gt; {tk['token_text']} &lt;/div&gt; &lt;/div&gt; ); } else { tokens_to_render.push( &lt;div key = {`id${cntr}`} &gt; &lt;div id = {`label${cntr}`} className='label' key={tk.tid} &gt;{tk['label']}&lt;/div&gt; &lt;div key={cntr} id = {`span${cntr}`} index={tk['spanid']} &gt; {tk['token_text']} &lt;/div&gt; &lt;/div&gt; ); }; cntr = cntr + 1; }); return ( &lt;div key="outer" &gt; &lt;div key="id" className="control-box"&gt; {tokens_to_render} &lt;/div&gt; &lt;/div&gt; ) } } export default Relation;</pre> <p><br /></p>
P粉739886290
P粉739886290

全部回复(1)
P粉413307845

Translation: 像useState这样的Hooks只能在函数组件中使用。要在类组件中使用状态:

  • 从render()方法中返回要显示的JSX。
  • 将初始状态赋值给state属性。
  • 调用this.setState来更新状态。

例如:


class Example extends React.Component {
    state = {
        count: 0
    }
    
    render() {
        return <div>
            <button onClick={() => this.setState({count: this.state.count + 1})}>
                Increment count
            </button>
            <p>Clicked {this.state.count} times</p>
        </div>;
    }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号