Как выполнить компонент реагировать из HTML - PullRequest
Новая
       7

Как выполнить компонент реагировать из HTML

0 голосов
/ 05 января 2019

Я начинаю строить компонент реагирования, чтобы узнать, как это сделать. Я хочу встроить его в существующую HTML-страницу (ну, в любом случае, эрб), но я не уверен, как заставить его исполниться.

обновление страницы ничего не делает и не отображает то, что находится в компоненте реакции. Журналы консоли также не отображаются, поэтому я предполагаю, что они не выполняются. 

// in main_control.js
var MainControl = React.createClass({
  render: function() {
    return <div>Something something Dark Side</div>;
    }
});

ReactDOM.render(
  <MainControl />,
  document.getElementById('main_control')
);

// in the html file
<head>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src='/components/main_control.js' type='text/babel'>     
</script>
</head>


<h3>control for <%= @site.site_name %> </h3>


<div id="main_control"></div>

~

Единственное, что появляется, это то, что находится в теге

1 Ответ

0 голосов
/ 05 января 2019

Вы были близки, вот как вы создаете компонент без состояния: 

const MainControl = () => {
    return <div>Something something Dark Side</div>
};

ReactDOM.render(
  <MainControl />,
  document.getElementById('main_control')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>
<h3>control for <%= @site.site_name %> </h3>
<div id="main_control"></div>

А вот как вы создаете состояние: 

class MainControl extends React.Component{
  render(){
      return <div>Something something Dark Side</div>
  }
}


ReactDOM.render(
  <MainControl />,
  document.getElementById('main_control')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>
<h3>control for <%= @site.site_name %> </h3>
<div id="main_control"></div>

Если вы хотите динамически генерировать имя вашего сайта с помощью React: 

const MainControl = ({ siteName }) => {
    return (
      <div>
        <h3>{siteName}</h3>
        <div>Something something Dark Side</div>
      </div>
    )
    
};

ReactDOM.render(
  <MainControl siteName='My website'/>,
  document.getElementById('main_control')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>
<div id="main_control"></div>
...