在React.js / JSX中返回带有嵌套三元的列表项

Question

我希望我的react组件返回一个列表项，具体取决于提供给它的对象数组的类型（字符串数组元素与非字符串数组元素）。一切都有效，除了嵌套的三元部分。正确评估条件，当我@id='add'而不是<li>{console.log(listValue2)}</li>时，会记录正确的值。但无论我做什么代码，列表项都不会出现在DOM或虚拟DOM中。我的代码也可以在https://github.com/neallred/neallred/tree/master/src/components处找到。

有什么想法吗？

List.jsx

<li>{listValue2}</li>

This.props.list结构（FixturesEducation.jsx）：

import React from 'react';
export class List extends React.Component {
  render(){
    return (
        <div>
          {this.props.list.map(function(listValue, index){
            return (
              <div key={index}>
                <h3>{listValue.title}</h3>
                <p>{listValue.description}</p>
                <ul>
                {(typeof listValue.highlights === 'object' ?
                  listValue.highlights.map(function(listValue2, index2){
                    (typeof listValue.highlights[index2] === 'string' ?
                     <li>{listValue2}</li>
                    :
                      <li>{listValue2.title}</li>
                    )
                  })
                :
                  <li>no highlights object/outside of nested conditional</li>
                )}
                </ul>
              </div>
            );
          })}
        </div>
    );
  }
}

代码调用List组件（Education.jsx）：

import React from 'react';
import { List } from './List.jsx';
...

const researchAssistant = {
  title: 'Research Assistant Work',
  description: `Working for Professors...`,
  highlights: [
    'Ensured research replicability',
    'more strings here...',
    'Used Stata scripts to conduct quantitative analyses'
  ]
};

const math = {
  title: 'Mathematical Foundation',
  description: 'Via several math and economics courses...',
  highlights: [
    'Game Theory (Econ 478)',
    'more strings here...',
    'Calculus I (Math 112 equivalent)'
  ]
};
const economics478 = {
    title: 'Game Theory',
    highlights: [
      'several',
      'strings...'
    ]
};
const economics459 = {
  ...
};
const economics388 = {
  ...};
const economics382 = {
  ...
};
const economics = {
  title: 'Economics',
  description: 'I learned about...,
  highlights: [
    economics478,
    economics459,
    economics388,
    economics382
  ]
};
const politicalScience372 = {
  ...
};
const politicalScience376 = {
  ...
};
const politicalScience497r = {
  ...
};
const politicalScience470 = {
  ...
};
const politicalScience344 = {
  ...
};
const politicalScience = {
  title: 'Political Science',
  description: 'I learned a lot...',
  highlights: [
    politicalScience470,
    politicalScience497r,
    politicalScience376,
    politicalScience372,
    politicalScience344
  ]
};
const spanish = {
  title: 'Spanish Language',
  description: 'I obtained my Spanish Language certificate...'
};
const businessMinor = {
  title: 'Business Minor',
  description: 'I this minor, I learned...'
};

const FixturesEducation = {
  title: 'Education',
  description: 'I attended ...',
  highlights: [
    researchAssistant,
    math,
    economics,
    politicalScience,
    businessMinor,
    spanish

  ]
};
export { FixturesEducation };