reactjs - 如何从另一个组件获取组件变量，但它们都在同一个文件中React

Question

我试图从文件 Itemspaging 中的外部组件获取类 DataTable 渲染中的变量 items。有什么办法可以实现这一点吗？

DataTable.js:

import React, { Component } from 'react'
import { Table, Button} from 'reactstrap';
import ModalForm from '../Modals/Modal'
import '../../index.css';

const Itemspaging = props => {

  const j = parseInt(props.index);
  var start, end,itm;

    start=5*(j-1);
    end=start+(5-1);

    for (var i = 0; i < items.length; i++) {
     return(
       items.slice(start,end)
     )
   }
}


class DataTable extends Component {

    deleteItem = id_azienda => {

      let confirmDelete = window.confirm('Vuoi Eliminarlo Definitivamente?')
        if(confirmDelete){

          fetch('http://localhost:5000/api/azienda', {
          method: 'delete',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            id_azienda
          })

        })
          .then(response => response.json())
          .then(item => {
            this.props.deleteItemFromState(id_azienda)
            console.log(item)
          })

          .catch(err => console.log(err))
        }
        console.log(id_azienda)
      }

  render() {


    const items = this.props.items.map(item => {

      return (

        <tr key={item.id_azienda}>
          <th scope="row">{item.id_azienda}</th>
          <td>{item.nome_azienda}</td>
          <td>{item.tipo}</td>
          <td>
            <div style={{width:"110px"}}>
              <ModalForm buttonLabel="Modifica" item={item} updateState={this.props.updateState}/>
              {' '}
              <Button color="danger" onClick={() => this.deleteItem(item.id_azienda)}>Elimina</Button>
            </div>
          </td>
        </tr>
        )
      })



    return (
     [ <input type="text" id="myInput" onChange={this.Filter} placeholder="Search for names.." title="Type in a name"/>,

      <Table id="myTable" bordered  hover >

        <thead>
          <tr>
            <th>ID</th>
            <th  onClick={() => this.sortTable(0)}>Nome Azienda <i id="0" className="fa fa-fw fa-sort" ></i></th>
            <th  onClick={() => this.sortTable(1)}>Tipo Azienda<i id="1"className="fa fa-fw fa-sort"></i></th>
          </tr>
        </thead>

        <tbody>
          {items}
        </tbody>
      </Table>]
    )

  }

  Filter = () => {
    // Declare variables
    var input, filter, table, tr, td, cell, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 1; i < tr.length; i++) {
      // Hide the row initially.
      tr[i].style.display = "none";

      td = tr[i].getElementsByTagName("td");
      for ( j = 0; j < td.length; j++) {
        cell = tr[i].getElementsByTagName("td")[j];
        if (cell) {
          if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
            break;
          } 
        }
      }
    }
  }

   sortTable =(n) =>{
    var table, rows, switching, i, x, y, shouldSwitch, dir, classname, switchcount = 0;
    table = document.getElementById("myTable");
    classname ="fa fa-fw fa-sort";
    switching = true;
    // Set the sorting direction to ascending:
    dir = "asc";

    /* Make a loop that will continue until
    no switching has been done: */
    while (switching) {
      // Start by saying: no switching is done:
      switching = false;
      rows = table.rows;
      /* Loop through all table rows (except the
      first, which contains table headers): */
      for (i = 1; i < (rows.length - 1); i++) {
        // Start by saying there should be no switching:
        shouldSwitch = false;
        /* Get the two elements you want to compare,
        one from current row and one from the next: */
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        /* Check if the two rows should switch place,
        based on the direction, asc or desc: */
        if (dir === "asc") {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            // If so, mark as a switch and break the loop:
            shouldSwitch = true;

           //console.log(isn)
            break;
          }
        } else if (dir === "desc") {
          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
            // If so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        /* If a switch has been marked, make the switch
        and mark that a switch has been done: */
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        // Each time a switch is done, increase this count by 1:
        switchcount ++;
      } else {
        /* If no switching has been done AND the direction is "asc",
        set the direction to "desc" and run the while loop again. */
        if (switchcount === 0 && dir === "asc") {
          dir = "desc";
          switching = true;
        }
      }

    }

    //Arrows controls

    for(var t=0;t<document.getElementsByTagName("i").length;t++){
      console.log(t)
    console.log(n)
      if(n===t){
        console.log("entrato")
        if(dir==="asc"){
          classname ="fa fa-fw fa-sort-desc";
          document.getElementById(n).className= classname;

       }else{
         classname ="fa fa-fw fa-sort-asc";
          document.getElementById(n).className= classname;

       }
      }else{
        classname ="fa fa-fw fa-sort";
        document.getElementById(t).className= classname;
      }
    }
  }
}


export default {DataTable,Itemspaging};

非常感谢您的帮助:)

Answer 1

不要这样做。您应该始终拥有 1 个组件/文件。我的建议是使用一个容器组件来管理数据并将其传递给您拥有的两个组件。您可以使用作为 props 传递的方法来对顶级数据集进行更改。

这应该可以帮助您了解应该如何做: Passing data between two sibling React.js components