javascript - 将参数传递给实际上是组件的 Prop ？

Question

我的场景是我有一个基于数据生成的表。在其中一列中，我想传递一个“删除”按钮/组件，这意味着删除它所在的行。
我的问题是需要为“删除”按钮组件指定行，以便它可以确定要删除的数据。

如果您查看 Table.js，您会看到我在哪里将 prop 渲染为组件“{col.component}” - 但是我如何也可以将值传递给组件操作？

下面的示例。

App.js

import React, { Component } from 'react';
import Table from './Table';
import Table from './RemoveButton';

class App extends Component {

  //Data is the array of objects to be placed into the table
  let data = [
  {
    name: 'Sabrina',
    age: '6',
    sex: 'Female',
    breed: 'Staffordshire'
  },
  {
    name: 'Max',
    age: '2',
    sex: 'Male',
    breed: 'Boxer'
  }
  ]

  removeRow = name => {
    //Remove object from data that contains name
  }

  render() {

   //Columns defines table headings and properties to be placed into the body
   let columns = [
   {
      heading: 'Name',
      property: 'name'
   },
   {
      heading: 'Age',
      property: 'age'
   },
   {
      heading: 'Sex',
      property: 'sex'
   },
   {
      heading: 'Breed',
      property: 'breed'
   },
   {
      heading: '',
      component: <RemoveButton action=removeRow()/>
   }
   ]

    return (
      <>
        <Table
          columns={columns}
          data={data}
          propertyAsKey='name' //The data property to be used as a unique key
        />
      </>
    );
  }
}

export default App;

RemoveButton.js

import React from 'react';

const RemoveButton = action => {
    return(
        <button onClick={action}>Remove Row</button>
    )
}

export default RemoveButton;

Table.js

const Table = ({ columns, data, propertyAsKey }) =>
    <table className='table'>
        <thead>
            <tr>{columns.map(col => <th key={`header-${col.heading}`}>{col.heading}</th>)}</tr>
        </thead>
        <tbody>
            {data.map(item =>
                <tr key={`${item[propertyAsKey]}-row`}>
                    {columns.map(col => {
                       if(col.component){
                          return(<td> key={`remove-${col.property}`}>{col.component}</td>)
                       } else {
                           return(<td key={`${item[propertyAsKey]}-${col.property}`}>{item[col.property]}</td>)
                       }
                    })}
                </tr>
            )}
        </tbody>
    </table>

Answer 1

您可以将 removeRow 函数作为常规 prop 传递给 Table 组件，而不是向下传递列中的组件，并在 remove 上有另一个值列以指示何时应呈现该列的删除按钮，并在调用它时传递项目名称。

class App extends React.Component {
  state = {
    data: [
      {
        name: "Sabrina",
        age: "6",
        sex: "Female",
        breed: "Staffordshire"
      },
      {
        name: "Max",
        age: "2",
        sex: "Male",
        breed: "Boxer"
      }
    ]
  };

  removeRow = name => {
    this.setState(({ data }) => ({
      data: data.filter(el => el.name !== name)
    }));
  };

  render() {
    let columns = [
      {
        heading: "Name",
        property: "name"
      },
      {
        heading: "Age",
        property: "age"
      },
      {
        heading: "Sex",
        property: "sex"
      },
      {
        heading: "Breed",
        property: "breed"
      },
      {
        heading: "",
        removeCol: true
      }
    ];

    return (
      <Table
        columns={columns}
        data={this.state.data}
        removeRow={this.removeRow}
        propertyAsKey="name"
      />
    );
  }
}

const Table = ({ columns, data, removeRow, propertyAsKey }) => (
  <table className="table">
    <thead>
      <tr>
        {columns.map(col => (
          <th key={`header-${col.heading}`}>{col.heading}</th>
        ))}
      </tr>
    </thead>
    <tbody>
      {data.map(item => (
        <tr key={`${item[propertyAsKey]}-row`}>
          {columns.map(col => {
            if (col.removeCol) {
              return (
                <td key={`remove-${col.property}`}>
                  <button onClick={() => removeRow(item.name)}>
                    Remove Row
                  </button>
                </td>
              );
            } else {
              return (
                <td key={`${item[propertyAsKey]}-${col.property}`}>
                  {item[col.property]}
                </td>
              );
            }
          })}
        </tr>
      ))}
    </tbody>
  </table>
);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>