Как скрыть HTML-элемент, если JSON-ключ не существует в React

Если вы просто берете опору и потенциально выводите ее, вы можете сделать ее простой и просто указать то, что вам нужно, в переменной.

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 (ничего не даст), затем проверьте, есть ли там свойство, а затем замените нулевое значение своим JSX.

Кроме того, да, используйте стандартный синтаксис функции componentDidMount () {}, и typeof был бы ненужным.

Как отмечает Люк в комментариях,

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. Но поскольку страница загружается и просто не обрабатывает определенную часть логики правильно, я предполагаю, что вы имели в виду только HTML-подобные вещи внутри вашего JSX (файл something.js), а не буквально файл HTML.

Попробуй это

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

Код, который вы разместили, действительно не имеет никакого смысла. Вы должны прочитать о React и о том, как он работает. Вам никогда не понадобится DOM-select-by-ID для HTML-элемента, отображаемого компонентом React из этого компонента React. Вместо этого вы просто заставляете функцию рендеринга компонента 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>
    );

Я бы удалил объекты без ключа до того, как был создан какой-либо из их соответствующих компонентов. Что-то вроде:

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>

) ) } ) }