如果 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>

我假设我不需要发布我的 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>
  );
}

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

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

Answer 2

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

是否渲染的逻辑应该存在于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 中的类似 HTML 的东西（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

您发布的代码实际上没有任何意义。你应该阅读 React 以及它是如何工作的。你永远不需要 DOM-select-by-ID 一个由 React 组件从该 React 组件中呈现的 HTML 元素。相反，您只需让 React 组件的渲染函数检查您的条件，然后相应地渲染 HTML。

除了实际上在这里，你甚至不这样做，因为如果你按照我认为的方式使用地图（你没有发布你的数据，所以很难说），那么你可以为数组中的每个项目生成一个 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>

) ) } ) }