arrays - 将 React 状态变量插入渲染数组
问题描述
如何将“word”变量插入到渲染对象中,如下面的代码所示,我尝试了 $word
和 $word 但没有一个有效
import React, {useState, useEffect} from 'react'
export default function dictionary() {
const data = {
"ABATE": {
"MEANINGS": {
"2": [
"Verb",
"become less in amount or intensity",
[ "Decrease", "Diminish", "Lessen", "Fall" ],
[ "The storm abated", "The rain let up after a few hours" ]
]
},
"ANTONYMS": [],
"SYNONYMS": [ "Slack off", "Slack", "Abate", "Die away", "Slake" ]
},
"ABATEMENT": {
"MEANINGS": {
"2": [
"Noun",
"the act of abating",
[ "Moderation", "Mitigation" ],
[ "laws enforcing noise abatement" ]
]
},
"ANTONYMS": [],
"SYNONYMS": [ "Abatement", "Suspension", "Reprieve", "Hiatus", "Respite" ]
},
};
const [word, setWord] = useState('ABATE')
return (
<>
<div>
<label>Word</label>
<input type="text" value={word} onChange={(e) => setWord(e.target.value)} />
</div>
<div className="container pt-n5" >
<div className="jumbotron d-flex justify-content-center " >
<div>
<b> Meaning:</b>
<p>{data.$`word`?.MEANINGS[0]}</p> {word} <br />
<b> Meaning:</b> <p>{data.$word?.MEANINGS[1]}</p>
<b> Meaning:</b> <p>{data.$word?.MEANINGS[2]}</p>
</div>
</div>
</div>
</>
);
}
解决方案
使用bracket-notation
:
data[word]
推荐阅读
- azure-active-directory - 如何在 OpenIdConnectConfigurationRetriever.GetAsync 调用中使用公司代理?
- javascript - 我得到“无法设置属性‘innerHTML’为空
- javascript - Bootstrap 4导航下拉悬停在桌面/点击移动
- asp.net-mvc - aspnet mvc 页面在未使用几分钟后崩溃
- javascript - $('#iframe').load() 在生产中响应很晚,尽管它在开发(本地)环境中运行良好
- php - 仅在 is_archive woocommerce 时显示价格
- solr - SOLR 多对多,带有额外的列映射
- c# - 允许用户在基本计算器中使用点表示十进制数
- python - TypeError:无法将 JpegImageFile 连接到字节
- c# - IdentityServer4 with ASP.Net Core App:性能问题 - 太慢了