Как выводить текст в ReactJS без его обертывания

В моем приложении, основанном на ReactJS, я:

var _ = React.DOM;
_.span(null, 'some text', _.select(null, ...));

Проблема заключается в следующем: "некоторый текст" завернут в дополнительный элемент span в DOM. Есть ли способ избежать этого поведения и просто выводить исходный текст?

Чтобы быть ясным: я хочу вывести

<span>some text<select>...</select></span>

не

<span><span>some text</span><select>...</select></span>

Ответы

Ответ 1

Обновление: Теперь это исправлено в React v15 (2016-04-06). Теперь комментарии вокруг каждого фрагмента добавляются к комментариям, но это больше не завернуты в тег <span>.

Мы получили потрясающий вклад сообщества в этом выпуске, и мы хотели бы выделить этот запрос на растяжение Michael Wientk в частности. Благодаря работе Майклса React 15 больше не выделяет лишние узлы <span> вокруг текста, делая вывод DOM намного чище. Это было долгое раздражение для пользователей React, поэтому было бы интересно принять это как внешний вклад.

Примечания к полной версии.

В настоящее время это техническое ограничение React; он переносит любые плавающие текстовые узлы в промежутке, чтобы он мог назначить ему идентификатор и позже вернуться к нему. В будущей версии React мы можем удалить это ограничение.

Ответ 2

Вы можете жестко скопировать html в крайнем случае.

<option value={value} dangerouslySetInnerHTML={{__html: value}}></option>

Ответ 3

Ну.. Если вы чертовски настроены на это и соглашаетесь с ограничениями, которые вы не можете получить в реквизитах или состоянии, вы можете сделать это:

var Component = React.createClass({
    displayName:"Statics",
    statics: {
         customRender: function(foo) {
              return React.renderToStaticMarkup(<div 
              dangerouslySetInnerHTML={{__html: foo.bar }}/>);
         }
    },
    render: function () {
        return <div dangerouslySetInnerHTML={{__html: 
               <Component.customRender bar="<h1>This is rendered
               with renderToStaticMarkup</h1>" />}} />
    }
});

renderToStaticMarkup не будет вставлять какие-либо промежутки или реагировать-dataid и предназначен для рендеринга статического сервера. Вероятно, это не очень хорошая идея, но там вы идете.

renderToStaticMarkup Подобно renderToString, кроме этого не создается дополнительный DOM такие атрибуты, как data-react-id, которые React использует внутренне. Это полезно, если вы хотите использовать React как простой статический генератор страниц, так как отключение дополнительных атрибутов может сэкономить много байтов.

Проверьте результат: http://learnreact.robbestad.com/#/static

Ответ 4

I Изменена версия реакции и реагирования и отлично работает

"react": "^15.0.1",
"react-dom": "^15.0.1"