如果 React 中不存在 JSON 键，如何隐藏 HTML 元素

Question

我正在尝试根据要导入的数据中是否存在 JSON 键来隐藏或显示 HTML 元素。如果该键存在，我希望显示我放入该对象的元素 ID。如果键不存在，我想隐藏相同的元素 ID。我正在使用 React，但不确定它是否属于 componentDidMount 或常规函数。我是新手，所以如果我不小心遗漏了重要的代码或写了蹩脚的东西，我深表歉意。

我的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;
  }
};

我的HTML:

<span id="work-examples" className="work-examples">
  <a href={props.workItemData.workExamples}>Work Examples</a>
</span>

我假设我不需要 post 我的 JSON 对象。我有一些;只有一个有 workExamples 键。我正在使用 .map() 列出对象。

使用上面的代码，它不会隐藏列表中没有键的 JSON 对象的元素。希望这一切都有意义。感谢任何帮助。

Answer 1

如果您只是获取道具并可能输出它，您可以保持简单，只需在变量中命名您需要的内容即可。

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>
  );
}

这将允许你有一个 null 值，如果需要可以将其注入 JSX（不会产生任何东西），然后检查 prop 是否存在，然后用你的 JSX 替换 null 值。

此外，是的，使用标准的 componentDidMount() {} 函数语法和 typeof 是不必要的。

Answer 2

正如卢克在评论中指出的那样，

the logic for whether or not to render should live in 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>

试图将 href 的值设置为 JavaScript 中的值（花括号中的内容）。这对 JSX 有效，因为您使用的是 React，所以这是有道理的，但不是纯粹的 HTML。但是由于页面正在加载并且只是没有正确处理逻辑的某个部分，我假设你只是指你的 JSX 中的 HTML-like 东西（一个 something.js 文件）而不是字面意思HTML 文件。

Answer 3

试试这个

render(){
   return props.workItemData.workExamples && (
      <span id="work-examples" className="work-examples"> 
        <a href={props.workItemData.workExamples}>Work Examples</a>
      </span>)
}

Answer 4

您 post 编辑的代码没有任何意义。您应该阅读 React 及其工作原理。您永远不需要 DOM-select-by-ID 一个 HTML 元素，该元素由 React 组件从该 React 组件中呈现。相反，您只需让 React 组件的渲染函数检查您的条件，然后相应地渲染 HTML。

除非实际上在这里，否则你甚至不需要这样做，因为如果你按照我认为的方式使用地图（你没有 post 你的数据，所以很难说)，那么您只需为数组中的每个项目生成一个 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>
    );

Answer 5

我会在创建相应组件之前删除没有密钥的对象。类似于：

render() {
  return (
    <div>
      {
        Object.keys(workItems)
        .filter(item => item.workExamples)
        .map(item => <YourComponent {...item} />)
      }
    </div>
  )
}

Answer 6

在 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>

) ) } ) }

如果 React 中不存在 JSON 键，如何隐藏 HTML 元素

How to hide an the HTML element if a JSON key doesn't exist in React

javascript

json

show-hide

reactjs