반응 테이블을 재사용하는 방법

Question

반응 구성 요소 라이브러리를 만들어서 전체 응용 프로그램을 통해 사용할 수 있도록 노력하고 있습니다. 라이브러리의 첫 번째 부분이 테이블이고 이것은 아직 테스트 단계에 있지만 구성 요소를 호출하고 호출 된 페이지에서이를 만드는 방법을 파악할 수 없습니다. 현재 이것이 작동하는 방식입니다. 어제도 React에서 프로그래밍을 시작했습니다.

<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> 

HTML은 그 때 나는 내 구성 요소 반응이있다.

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); 

그리고 나는 HTML에 table.js 파일을 가져올하지만 난 그게 구성 요소의 사용에서 더 보편적으로 좋아하고

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); 

작품이 잘 작동하지만 HTML 페이지에 ReactDom.renders를 제거하면 실제로 그것을 구성 요소를 걸었습니다 첫 번째 방법은 구성 요소 표가 존재하지 않는 것을 말한다. 어쨌든 나중에 테이블에 응용 프로그램을 만들 때 테이블을 가져 오면 table.js를 가져 와서 소스와 해당 테이블을 연결해야합니다. 나는 여기에 다른 대답을 보았지만 주로 유용성에 대한 데이터를 다루는 것 같다.

Answer 1

사용 내보낼 필요가 : 여기

당신이 그것을 완수하는 방법입니다 module.exports 당신은 반응을 위해 ES6를 사용하지 않기 때문에.

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

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

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

는 또한 것은 그래서 당신은 당신의 코드를 transpile하는 webpack 또는 browserify 중 하나를 사용합니다 JSX를 지원하지 않는 브라우저입니다.

좋은 튜토리얼 링크 Webpack tutorial

Answer 2

글쎄 거의 다 왔어.

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 당신의 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> 

Answer 3

이 반작용과 구성 요소 재사용을 만드는 방법은 여러 가지가 있지만 최근에 여기에 몇 가지를 배우기 시작하기 때문에 당신이 갈 수 있습니다.

1. 실제에 기대어 선호하는 대신 브라우저의 응용 프로그램을 반응하지만, 그 이유는 무엇입니까? 작성한 코드는 es5 코드이므로 ES6에서 더 깨끗하고 재사용 가능한 코드를 작성할 수 있습니다.

2. 어떤 상용구를 사용하기 위해 처음에는 웹팩 및 기타 복잡한 것들에 뛰어 들어야 할 필요가 없습니다.

3. 이제는 재사용이 가능 해지고 있습니다. webpack으로 사용하면 모든 코드가 하나의 js 파일로 결합되어 웹 사이트 어디에서나 구현할 수 있습니다.

이제 별도의 js 파일을 사용하는 방법에 대한 코드

체크 이것에 대한 https://facebook.github.io/react/docs/getting-started.html

는 정보의 중요한 부분

주를 가지고 그 일부 브라우저 (크롬, 예) HTTP를 통해 제공되는 경우가 아니면 별도 파일을로드하지 못합니다.