Я хотел бы сгенерировать 3 span внутри div с помощью реакции, вот мой код.

export class Test extends React.Component<undefined, undefined> {
  render() {
    const list = ['test1', 'test2', 'test3'];
    const body = (
      list.map(s => {
        <span>s</span>
      })
    )
    return (
      <div>
        {body}
      </div>
    )
  }
}

Однако это не сработало. Внутри div нет тега, почему? Здесь что-то не так?

2
Searene 28 Авг 2017 в 16:00

4 ответа

Лучший ответ

При использовании {} вы указываете обычный синтаксис JS, в то время как в этом случае вы пытаетесь использовать синтаксис JSX, поэтому вам следует заключить его в () или в этом подразумеваемом возвращении вы можете просто проигнорировать его.

export class Test extends React.Component<undefined, undefined> {
  render() {
    const list = ['test1', 'test2', 'test3'];
    const body = (
      list.map(s => 
        <span key={s}>s</span>
      )
    )
    return (
      <div>
        {body}
      </div>
    )
  }
}
5
Nocebo 28 Авг 2017 в 13:26
import React,{ Component } from 'react';
export class Test extends Component {

    renderRows(){
        const lists = ['test1', 'test2', 'test3'];
        lists.map(list=>{
            return (
                <span key={list}>{list}</span>
            );
        })
    }

    render() {
        return (
            <div>
                {this.renderRows()}
            </div>
        );
    }
}
1
Taranjeet Singh 28 Авг 2017 в 13:29

Вы можете использовать «краткое тело» или обычное «тело блока» для функции обратного вызова методов карты в функциях стрелок ES6.

В кратком тексте требуется только выражение, и к нему прилагается неявный возврат. В теле блока вы должны использовать явный оператор возврата.

Краткое тело

export class Test extends React.Component<undefined, undefined> {
  render() {
    const list = ['test1', 'test2', 'test3'];
    const body = (
      list.map(s => 
        <span key={s}>s</span>
      )
    )
    return (
      <div>
        {body}
      </div>
    )
  }
}

Корпус блока:

export class Test extends React.Component<undefined, undefined> {
  render() {
    const list = ['test1', 'test2', 'test3'];
    const body = (
      list.map((s) => 
        {return <span key={s}>s</span>}
      )
    )
    return (
      <div>
        {body}
      </div>
    )
  }
}

Дополнительную информацию см. На этой странице: https: // разработчик. mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

2
burakhan alkan 28 Авг 2017 в 13:31

Вам необходимо вернуть значения. Это должно работать:

export class Test extends React.Component<undefined, undefined> {
      render() {
        const list = ['test1', 'test2', 'test3'];
        const body = list.map(s => {
            return <span>s</span>
          })
        return (
          <div>
            {body}
          </div>
        )
      }
    }
4
Edward Gizbreht 28 Авг 2017 в 13:02