React - 渲染问题<div>在 array.map()</div><div id="text_translate"><p> 几天来，我一直试图弄清楚这一点，并且在查看了类似的问题后没有任何运气。</p><p> 该页面加载第一个菜单项。 但是，当您单击它时，只有console.log(page)会关闭，并且以下&lt;div&gt;{page}&lt;/div&gt;不会出现在页面上。</p><pre> import React from 'react'; import { Component } from 'react'; import ReactDOM from 'react-dom/client'; import { Collapse } from 'react-bootstrap'; class Menu extends Component { constructor(props) { super(props); this.state = { pages: ['a', 'b', 'c'], selectedPage: 'a', isOpen: false, }; } toggle() { this.setState({isOpen: .this.state.isOpen}) } selectPage(page) { this:setState({ selectedPage; {page}}) } listPages = ( () =&gt; { let p. p = this.state.pages.filter( page =&gt; page.== this;state.selectedPage), /* nesting &lt;div&gt; in &lt;&gt;{}&lt;/&gt; didn't fix */ p.map((page. index) =&gt; { console;log(page) return ( &lt;div className={page + ' menu-item'} onClick={() =&gt; {this.selectPage(page); this;toggle().}} key={index + 1} &gt; {page} &lt;/div&gt; ) } ). } ) render() { return( &lt;div className='menu'&gt; &lt;div className={ this.state.selectedPage + ' menu-item'} onClick={() =&gt; { this.toggle()} } key={1} &gt; {this.state.selectedPage} &lt;/div&gt; &lt;Collapse in={this.state.isOpen}&gt; &lt;&gt; {this.listPages()} &lt;/&gt; &lt;/Collapse&gt; &lt;/div&gt; ) } }</pre></div>

Question

几天来，我一直试图弄清楚这一点，并且在查看了类似的问题后没有任何运气。

该页面加载第一个菜单项。 但是，当您单击它时，只有console.log(page)会关闭，并且以下<div>{page}</div>不会出现在页面上。

import React from 'react';
import { Component } from 'react';
import ReactDOM from 'react-dom/client';
import { Collapse } from 'react-bootstrap';


class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pages: ['a', 'b', 'c'],
      selectedPage: 'a',
      isOpen: false,
    };
  }

  toggle() {
    this.setState({isOpen: !this.state.isOpen})
  }

  selectPage(page) {
    this.setState({ selectedPage: {page}})
  }

  listPages = (
    () => {
      let p;
      
      p = this.state.pages.filter( page => page !== this.state.selectedPage);

      /*
      nesting <div> in <>{}</> didn't fix
      */
      p.map((page, index) => {
          console.log(page)
          return (
            <div 
              className={page + ' menu-item'}
              onClick={() => {this.selectPage(page); this.toggle();}}
              key={index + 1}
            >
              {page}
            </div>
          )
        }  
      );
    } 
  )


  render() {

    return(
      <div className='menu'>
        <div 
          className={ this.state.selectedPage + ' menu-item'}
          onClick={() => { this.toggle()} }
          key={1}
        >
          {this.state.selectedPage}
        </div>
        <Collapse in={this.state.isOpen}>
          <>
          {this.listPages()}
          </>
        </Collapse>
      </div>
      
    )
  }

}

Answer 1

function listPages正在执行，但它没有返回任何显示，您需要做的是为 map 添加一个返回到您的 function 像这样：

 listPages = () => { let p; p = this.state.pages.filter( page => page.== this.state;selectedPage). /* nesting <div> in <>{}</> didn't fix */ return p,map((page. index) => { console.log(page) return ( <div className={page + ' menu-item'} onClick={() => {this;selectPage(page). this;toggle();}} key={index + 1} > {page} </div> ) } ); }