Компонент ReactJs не отображается

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

Я использую приложение asp.net MVC 5 и следую этому руководству https://reactjs.net/getting-started/tutorial_aspnet4.html, поскольку в руководстве говорится, что вам нужно добавить пакет React.Web.Mvc4 Nuget, который имеет некоторые зависимости.

Мой простой компонент React (SimpleComponent.jsx)

var ComponentBox = React.createClass({
    render: function() {
        return (<div style="background-color:antiquewhite">Hello World ReactJs Component!</div>);
    }
});

ReactDOM.render(
    <ComponentBox />,
    document.getElementById('reactDiv')
);

и мой взгляд на бритву довольно прост

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>


</head>
<body>
    <div id="reactDiv"></div>

    <script src="@Url.Content("~/Scripts/SimpleComponent.jsx")"></script>
</body>
</html>

Я что-то пропустил?


reactjs asp.net-mvc reactjs.net
person Voice Of The Rain    schedule 21.12.2017    source источник
comment
Какие-то ошибки в консоли? Изменить style="background-color:antiquewhite" на style={"background:antiquewhite"}   -  person Przemek eS    schedule 21.12.2017
comment
ошибка в консоли говорит: style prop ожидает сопоставление свойств стиля со значениями, а не строку. Например, style={{marginRight: spacing + 'em'}} при использовании JSX. Этот узел DOM был обработан ComponentBox   -  person Voice Of The Rain    schedule 21.12.2017
comment
О, просто моя ошибка: style={{"background:antiquewhite"}} стиль должен быть объектом. Если вы измените это и не работаете, попробуйте добавить в StyleComponent при запуске window.onload = function(){ и закрыть скрипт }   -  person Przemek eS    schedule 21.12.2017
comment
нет не работает синтаксическая ошибка   -  person Voice Of The Rain    schedule 21.12.2017
comment
Это доказывает, что я отсталый, решение было очень простым, измените атрибут стиля на style={{background:'antiquewhite'}}, чтобы он работал   -  person Voice Of The Rain    schedule 21.12.2017
comment
В реактивных стилях отличается от HTML. Dom-elements-React   -  person Przemek eS    schedule 21.12.2017
comment
Это проясняет тайну, спасибо   -  person Voice Of The Rain    schedule 21.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Решение моей проблемы состояло в том, чтобы заменить элемент стиля в моем файле jsx следующим образом.

var ComponentBox = React.createClass({
    render: function () {
        return (<div style={{background:'antiquewhite'}}>Hello World ReactJs Component!</div>);
    }
});

На основе react docs "использование атрибута стиля в качестве основного средства стилизации элементов обычно не рекомендуется"

используя объект javascript для хранения стиля в виде свойств, и я надеюсь, что это кому-то поможет.

person Voice Of The Rain    schedule 21.12.2017