如果您想在至少存在一个音符时渲染音符，并在数组中没有音符时呈现默认视图，您可以将渲染函数的返回表达式更改为：

return(
  <div className='list'>
      {notes.length ? notes : <p>Default Markup</p>}
  </div>
);

由于 JavaScript 中的空数组是真实的，因此您需要检查数组的长度，而不仅仅是数组的布尔值。

请注意，如果您的itemsprop 为空，则会导致异常，因为您将调用map空值。在这种情况下，我建议使用 Facebook 的prop-types库items默认设置为空数组。这样，如果items没有设置，组件就不会损坏。

这是最简单的处理方法

  import React, {Component} from 'react';


class List extends Component {
    constructor(props){
      super(props);
    }

render(){
  var notes = this.props.items?.map((item, i)=>{
      return(
          <li className="listLink" key={i}>
              <p>{item.title}</p>
              <span>{item.content}</span>
          </li>
          )
      });
    return(
      <div className='list'>

          {notes}

      </div>
    );
  }
}

export default List;

只需尝试添加“？” 对于您映射的数组

您可以只为 this.props.item

render() {
  const items = this.props.items || [] // if there's no items, give empty array
  const notes = items.map((item, i) => {
  return(
      ....

.map()对空数组执行操作不会产生错误，但会返回一个空数组。这很好，因为空数组是 react 中的可渲染项，不会产生错误render()，也不会渲染注释，因为没有提供注释。

在您的组件中，您可以设置defaultProps属性以将初始值设置为您的props：

static defaultProps = {
    items: []
};