Возвращение JSX-разметки

493

06 февраля 2017, 18:07

convert = (item) => {
    let result;
    for (let value in item) {            
        result += <span>{item[value]}</span>
    }
    return result;
}
render() {
    return (            
        <div style={style}>         
            {
                this.convert(this.props.data)
            }
        </div>
    );
}

Свойство this.props.data содержит объект. Необходимо все его свойства обернуть в тэг span и возвратить полученный результат. Но в итоге result возвращает:

Answer 1

Используйте для этого лучше map.
Object.keys(item).map(key => <span>item[key]</span>);

Все же jsx это объекты, а не строки. Важно в общем это все собрать в массив и вывести. Можете поступить так.

convert = (item) => {
    let result = [];
    for (let value in item) {            
        result.push(<span>{item[value]}</span>);
    }
    return result;
}
render() {
    return (            
        <div style={style}>         
            {
                this.convert(this.props.data)
            }
        </div>
    );
}

Или так

convert = (item) => {
   return Object.keys(item).map(key => <span>item[key]</span>);
}
render() {
    return (            
        <div style={style}>         
            {
                this.convert(this.props.data)
            }
        </div>
    );
}