我正在尝试根据我输入的数据中是否存在 JSON 键来隐藏或显示 HTML 元素。如果键存在，我想显示我放入该对象的元素 ID。如果键不存在，我想隐藏相同的元素 ID。我正在使用 React，不确定这是否属于组件 DidMount 或常规函数。我是新手，所以如果我不小心遗漏了重要的代码或正在写蹩脚的东西，我深表歉意。
我的componentDidMount代码：
componentDidMount = () => {
// Need to hide an the HTML element if the json key doesn't exist in the object
//check the JSON object for the key "workExamples"
if (typeof props.workItemData.workExamples === "undefined") {
console.log("it did not find the json key");
// Change element styling to hidden
document.getElementById("work-examples").style.visibility = "hidden";
} else {
return;
}
};
我的网页：
<span id="work-examples" className="work-examples">
<a href={props.workItemData.workExamples}>Work Examples</a>
</span>
我假设我不需要发布我的 JSON 对象。我有几个;只有一个具有workExamples密钥。我正在使用.map()列出对象。
使用上面的代码，它不会隐藏列表中没有键的 JSON 对象的元素。希望这一切都是有道理的。任何帮助将不胜感激。
正如卢克在评论中指出的那样，
是否渲染的逻辑应该存在于
render
此后，这里的其他答案已经涵盖了这方面的机制，所以我不会一介绍。
其他几点：
您正在尝试使用箭头函数来定义标准的 React 函数componentDidMount，并且基于快速的本地测试，我认为 React 无法理解这一点。与传统的componentDidMount() { /* do stuff here */ }语法相比，您似乎没有从中获得任何特别的好处，所以我会切换到后者。
您正在尝试检查您的 JSON 是否包含包含密钥
typeof props.workItemData.workExamples === "undefined"
但我不认为需要typeof;您可以直接检查密钥是否存在：
if(props.workItemData.workExamples) { /* do stuff */ }
最后，在您的 HTML 中，该行
<a href={props.workItemData.workExamples}>Work Examples</a>
正在尝试使用 JavaScript 中的值(大括号中的内容)设置href的值。这对 JSX 是有效的，这是有道理的，因为你使用的是 React，但不是在纯 HTML 中。但是由于页面正在加载并且没有正确处理逻辑的某个部分，我假设您只是指JSX(something.js文件)中类似HTML的内容，而不是字面上的HTML文件。
你发布的代码没有任何意义。你应该阅读 React 及其工作原理。你永远不需要 DOM-select-by-ID 一个由 React 组件从该 React 组件中呈现的 HTML 元素。相反，您只需让 React 组件的渲染函数检查您的条件，然后相应地渲染 HTML。
除了实际上在这里，你甚至不这样做，因为如果你按照我认为的方式使用 map(你没有发布你的数据，所以很难说)，那么你可以为数组中的每个项目生成一个 HTML 元素。所以如果它不在数组中，它就不会 map()。
render() {
let workItems = this.props.workItemData ? this.props.workItemData.map((item) =>
<span id={Object.keys(item)[0]} className={Object.keys(item)[0]}>
<a href={item[Object.keys(item)[0]]}>{Object.keys(item)[0]}</a>
</span>
) : '';
return (
<div>
{workItems}
</div>
);
试试这个
render(){
return props.workItemData.workExamples && (
<span id="work-examples" className="work-examples">
<a href={props.workItemData.workExamples}>Work Examples</a>
</span>)
}
如果你只是拿着道具并可能输出它，你可以保持简单，只在变量中命名你需要的东西。
render() {
let conditionalElement = null;
if(props.workItemData.workExamples) {
conditionalElement = (
<span id="work-examples" className="work-examples">
<a href={props.workItemData.workExamples}>Work Examples</a>
</span>
);
}
return (
<div>
{conditionalElement}
</div>
);
}
这将允许你有一个空值，如果需要的话，可以注入到JSX中(不会产生任何东西)，然后检查prop是否存在，然后用你的JSX替换空值。
另外，是的，使用标准组件DidMount() {}函数语法和typeof是不必要的。
我会在创建任何相应的组件之前删除没有键的对象。像这样：
render() {
return (
<div>
{
Object.keys(workItems)
.filter(item => item.workExamples)
.map(item => <YourComponent {...item} />)
}
</div>
)
}
在 React 中，我想在映射后只显示现有元素，因此在列表元素中我添加了 CSS 逻辑：
render() {
return (
<div>
{
data.map ((item) => {
return (<div>
<li>{item.answer1}</li>
<li>{item.answer2}</li>
<li>{item.answer3}</li>
<li style = {{display: item.answer4 ? 'block' : 'none'}}>
{item.answer4}</li>
<li style = {{display: item.answer5 ? 'block' : 'none'}}>
{item.answer5}</li>
<li style = {{display: item.answer6 ? 'block' : 'none'}}>
{item.answer6}</li>
) ) } ) }