Блог

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

HTML

 <script type="text/babel" src="/js/reactcomponents/table.js"></script>
<div id="loadboardContainer">
  <div class="table-desc">Future Loads</div>
  <div id="futureLoadsContainer"></div>

  <div class="table-desc">Todays Loads</div>
  <div id ="todaysLoadsContainer"></div>

  <div class="table-desc">Active Loads</div>
  <div id ="activeLoadsContainer"></div>
</div>
  

Затем у меня есть свой компонент react.

 var Table = React.createClass({
  getInitialState: function() {
    return {
      results: [],
      columns: []
    }
  },
  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function(result) {
      result = JSON.parse(result);

      if(result['resultRows'] == undefined){
        result['resultRows'] = [];
      }

      this.setState({
        results: result['resultRows'],
        columns: $.makeArray(result['resultCols'])
      });
    }.bind(this));
  },
  componentWillUnmount: function(){
    this.serverRequest.abort();
  },
  render: function() {
    // Set array for rows.
    var rows = [];
    var header = [];

    this.state.columns.map(function(cols) {
      header.push(<TableColumns data={cols.cols} key={cols.id} />);
    });

    this.state.results.map(function(result) {
      rows.push(<TableRow data={result.rows} key={result.id} />);
    });

    // Return the table.
    return (
      <table className="table table-condensed table-bordered no-bottom-margin">
        <thead>
          {header}
        </thead>
        <tbody>
          {rows}
        </tbody>
      </table>
    );
  }
});

// Set up columns
var TableColumns = React.createClass({
  render: function() {
    var colNodes = this.props.data.map(function(col, i){
      return (
        <th key={i}>{col}</th>
      );
    });
    return (
      <tr>
        {colNodes}
      </tr>
    );
  }
});

// Set up row
var TableRow = React.createClass({
  render: function() {
    var rowNodes = this.props.data.map(function(row, i){
      return (
        <td key={i}>{row}</td>
      );
    });
    return (
      <tr>
        {rowNodes}
      </tr>
    );
  }
});

var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');

ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);
  

И это работает, когда я импортирую table.js файл в html, но я хотел бы, чтобы он был более универсальным в использовании компонентов и удалял

 var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');

ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);
  

вызывается на странице html / php следующим образом.

 <script type="text/babel" src="/js/reactcomponents/table.js"></script>
    <div id="loadboardContainer">
          <div class="table-desc">Future Loads</div>
          <div id="futureLoadsContainer"></div>

          <div class="table-desc">Todays Loads</div>
          <div id ="todaysLoadsContainer"></div>

          <div class="table-desc">Active Loads</div>
          <div id ="activeLoadsContainer"></div>
        </div>

var futureContainer = document.getElementById('futureLoadsContainer');
    var todaysContainer = document.getElementById('todaysLoadsContainer');
    var activeContainer = document.getElementById('activeLoadsContainer');

    ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
    ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
    ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);
  

Первый способ, который работает, работает нормально, но если я удаляю ReactDOM.renders на html-страницу, на которую я фактически помещаю компонент, говорит, что таблица компонентов не существует. Есть ли способ сделать это, чтобы позже в приложении, когда у меня есть таблица, все, что мне нужно сделать, это импортировать table.js реагировать на компонент и подключать источник и его там? Я рассмотрел другие ответы здесь, но, похоже, они в основном касаются данных для удобства использования.

Чтобы использовать компонент table в вашем HTML, вам необходимо экспортировать его с помощью module.exports , поскольку вы не используете ES6 для React.

 var Table = React.createClass({
      ...
});
var TableColumns = React.createClass({
...
});

var TableRow = React.createClass({
  ...
});

 //Export the table component
module.exports = Table;
  

Также дело в том, что браузер не поддерживает JSX, поэтому вам нужно использовать либо webpack или browserify для переноса вашего кода.

Хороший учебник link Webpack tutorial

Ну, вы почти на месте.

Вот как вы должны это сделать:

Table.js

 var Table = React.createClass({
      //Everything stays same here
});
var TableColumns = React.createClass({
// Stays same here too
});

var TableRow = React.createClass({
  // This remains same
});

//Export the table component
export default Table;
  

HTML

 <script type="text/babel" src="/js/reactcomponents/table.js"></script>
<div id="loadboardContainer">
 <div class="table-desc">Future Loads</div>
 <div id="futureLoadsContainer"></div>

 <div class="table-desc">Todays Loads</div>
 <div id ="todaysLoadsContainer"></div>

 <div class="table-desc">Active Loads</div>
 <div id ="activeLoadsContainer"></div>
</div>
<script>
 var futureContainer = document.getElementById('futureLoadsContainer');
 var todaysContainer = document.getElementById('todaysLoadsContainer');
 var activeContainer = document.getElementById('activeLoadsContainer');

ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);
</script>
  

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

1. предпочитаю использовать реальное приложение react вместо браузера, но почему? код, который вы написали, — это код es5, и вы можете написать гораздо более чистый и повторно используемый код в ES6.

2. для начала используйте любой шаблон, чтобы вам не приходилось вначале погружаться в webpack и другие сложные вещи.

3. теперь перейдем к повторному использованию, если вы используете его как webpack, он объединяет весь ваш код в один js-файл, который вы можете реализовать в любом месте на своем веб-сайте.

Теперь о вашем коде

проверьте это, об использовании отдельного файла js https://facebook.github.io/react/docs/getting-started.html

в нем есть одна важная информация

Обратите внимание, что некоторые браузеры (например, Chrome) не смогут загрузить отдельный файл, если он не будет отправлен через HTTP.