React 中的 <details> 是什么？

Question

我正在阅读： https: //reactjs.org/docs/error-boundaries.html

有一个示例链接：https ://codepen.io/gaearon/pen/wqvxGa?editors=0010

在该示例中，第 22 行有一个标签“details”。那是什么？关于它的文档在哪里？

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      error: error,
      errorInfo: errorInfo
    })
    // You can also log error messages to an error reporting service here
  }

  render() {
  if (this.state.errorInfo) {
    // Error path
    return (
      <div>
        <h2>Something went wrong.</h2>
        <details style={{ whiteSpace: 'pre-wrap' }}>
          {this.state.error && this.state.error.toString()}
          <br />
          {this.state.errorInfo.componentStack}
        </details>
      </div>
    );
  }
  // Normally, just render children
  return this.props.children;
  }  
}

Answer 1

<details>是普通的 HTMLdetails标签。

您可以在MDN 文档中阅读有关该标签的更多信息。

HTML详细信息元素 ( <details>)创建一个公开小部件，其中只有当小部件切换到“打开”状态时信息才可见。可以使用该元素提供摘要或标签<summary>。

公开小部件通常使用小三角形显示在屏幕上，该三角形旋转（或扭曲）以指示打开/关闭状态，三角形旁边有一个标签。如果该元素的第一个子元素<details>是 a <summary>，则该元素的内容<summary>将用作公开小部件的标签。