Инициализация компонента реагирования от asp.net

Question

Надеюсь, это кто-то из-за неловкости ... моя основная проблема заключается в следующем: я создал очень хороший набор реагирующих компонентов, которые я могу отобразить в моем asp. net 4.5 mvc 6 application using response.js, flux, gulp и Browsify.

до тех пор, пока я его структурировал так, чтобы реагирующие компоненты имели все необходимые им данные, все идеально. Моя проблема теперь в том, что я хотел бы, чтобы MVC-просмотр включал реагирующие элементы и вводил свойства времени выполнения в компонент верхнего уровня по мере его создания. Поскольку я brpowserify-ки все мои реакции кода в пучок, я просто включить тег один сценарий, на мой взгляд:

<script src="/js/modules/AuthContainer.jsx"></script>

Но в то время как я обычно использую синтаксис JSX для создания экземпляра моего компонента с реквизитом как это:

... вид в ASP.NET никогда не переводится на чистом JS, так что не удается.

Я также попытался:

ReactDOM.render 
    (
    React.createElement(AuthContainer, { successPath: '/home' }), 
    document.getElementById('reactRoot') 
); 

... внутри блока сценария, на мой взгляд, но я получаю:

Uncaught ReferenceError: AuthContainer is not defined

Но я уверен, что я обнажая «AuthContainer» через пакет браузера, поэтому я не понимаю, почему он не может разрешить этот компонент.

Я знаю, что есть способ React.NET для этого, но я не могу получить этот серверный рендеринг для работы с моими компонентами, потому что я использую jQuery для извлечения данных в компоненте componentDidMount, а рендеринг на стороне сервера задыхаясь ищет $() jQuery.

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

Answer 1

Одно простое решение это, просто положить ваши стороне сервера свойства с Javascript в глобальном:

index.cshtml

<script> 
var __config__ = { 
    base: "@MyBackEdnVariable", 
    initialCount: "@Count", 
    user: { 
    id: @user.id, 
    name: @user.name, 
    } 
}; 
</script> 
<script src="/js/modules/AuthContainer.jsx"></script> 

И Реагировать использовать эту глобальную переменную:

AuthContainer.js

class AuthContainer extends React.Component { 
    render() { 
    return (
     <div>{this.props.user.name}</div> 
    ); 
    } 
} 

AuthContainer.defaultProps = { 
    initialCount: __config__.initialCount, 
    user: __config__.user 
}; 

Answer 2

Для потомков:

ReactDOM.render 
(
    React.createElement 
    (
     MyComponent, 
     { 
      prop1: @numericValue, 
      prop2: '@textValue', 
     } 
    ), 
    document.getElementById('reactRoot') 
); 

магия была JSX-альтернативный синтаксис, который я знал, не мог получить ручку на этот день. Это позволяет вам создавать экземпляр реакции с использованием чистого JS и просто вставлять внутри простого тега скрипта в ваш cshtml.

hth.