Если внутри функция жирной стрелки

Question

Если внутри функция жирной стрелки

1

Я не уверен, как это написать. У меня есть этот тернарный оператор внутри толстой стрелки. но если не удается выполнить код. У меня нет ошибок с браузером или на консоли, но он просто не печатает заголовки.

Если я опустил {} и тернарный оператор, он отлично работает.

Что я печатаю неправильно?

<Row className="grid-header">
    {
        this.props.columnsInfo.map((info) => {
            width = (info.colWidth) ? "className={info.colWidth}" : "xs={this.calculateColumnSize()}";
            <Col style={{ paddingTop: 10, paddingLeft: 10 }} key={info.header} width>{info.header}</Col>
        })
    }
</Row>

morne 23 авг. 2017, в 15:53

Источник

Теги:

javascript

arrays

if-statement

jsx

higher-order-functions

2 ответа

5

Вы просто забыли возвращение внутри map().
Внутри map() вы возвращаетесь для каждой итерации undefined и это будет проигнорировано, потому что нет рендеринга для рендеринга.
Когда вы используете fat arrow function " fat arrow function с "{}", вы должны явно возвращать ((x) => {return x + x}) переменную, но без нее неявно возвращается ((x) => x + x).

Решение

<Row className="grid-header">
    {
        this.props.columnsInfo.map(info => {
            const width = info.colWidth 
              ? "className={info.colWidth}"
              : "xs={this.calculateColumnSize()}";
            return <Col style={{ paddingTop: 10, paddingLeft: 10 }} key={info.header} width>{info.header}</Col>
        })
    }
</Row>

Roman 23 авг. 2017, в 11:47

0

Ваш код создает глобальные переменные.
dfsq 23 авг. 2017, в 13:37
0

@dfsq Я изменил его на постоянную const width . Не заметил, когда ответил на главную ошибку. Спасибо..
Roman 23 авг. 2017, в 13:46

Ещё вопросы

Ваш код создает глобальные переменные.
@dfsq Я изменил его на постоянную const width . Не заметил, когда ответил на главную ошибку. Спасибо..

TW80000 · Accepted Answer · 2017-08-23T12-23-00.000Z

Вам нужно явно вернуть jsx, если это не весь объект функции жирной стрелки.

Ваш код исправлен:

<Row className="grid-header">
    {this.props.columnsInfo.map(info => {
            const width = (info.colWidth)? "className={info.colWidth}" : "xs={this.calculateColumnSize()}";
            return (<Col style={{paddingTop:10,paddingLeft:10}} key={info.header} width>{info.header}</Col>);
    })}
</Row>

Причина, по которой она работает, когда вы удаляете фигурные фигурные скобки и тройной оператор, состоит в том, что когда вы выполняете функцию толстой стрелки без фигурных скобок для тела, она неявно возвращает тело, которое должно быть только одним утверждением. Поскольку вы добавляете второй оператор в тело функции (тройная строка), вам нужно добавить фигурные скобки тела, и теперь там есть фигурные скобки тела, вам нужно написать ключевое слово return потому что оно больше не подразумевается для вашего jsx линия.

Хорошее объяснение TW80000. Благодарю.