Javascript 将参数传递给实际上是组件的道具？

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

如果您查看Table.js，您可以看到我将道具呈现为组件“{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;

import React from 'react';

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

export default RemoveButton;

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>

import React，{Component}来自'React'；
从“./Table”导入表；
从“/RemoveButton”导入表；
类应用程序扩展组件{
//数据是要放入表中的对象数组
让数据=[
{
姓名：“Sabrina”，
年龄：'6'，
性别：'女性'，
品种：“斯塔福德郡”
},
{
名称：“Max”，
年龄:"2",，
性别：'男'，
品种：“拳击手”
}
]
removeRow=name=>{
//从包含名称的数据中删除对象
}
render（）{
//列定义要放置在正文中的表标题和属性
让列=[
{
标题：“姓名”，
属性：“名称”
},
{
标题:"年龄",，
财产：“年龄”
},
{
标题:"性",，
财产：“性”
},
{
标题：“品种”，
财产：'品种'
},
{
标题：“”，
组成部分：
}
]
返回(
);
}
}
导出默认应用程序；

RemoveButton.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;

import React from 'react';

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

export default RemoveButton;

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>

从“React”导入React；
const RemoveButton=操作=>{
返回(
删除行
)
}
导出默认移除按钮；

Table.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;

import React from 'react';

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

export default RemoveButton;

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>

const Table=（{columns，data，propertyAsKey}）=>
{columns.map（col=>{col.heading}）}
{data.map（项=>
{columns.map（col=>{
if（列组件）{
返回（键={`remove-${col.property}`}>{col.component}）
}否则{
返回（{item[col.property]}）
}
})}
)}

您可以将

removeow

函数作为常规道具传递给

表

组件，而不是传递列中的组件，并且在remove列上有另一个值，以指示何时应呈现该列的remove按钮，并在调用它时传递项目名称

类应用程序扩展了React.Component{
状态={
数据：[
{
姓名：“萨布丽娜”，
年龄:"6岁",，
性别：“女”，
品种：“斯塔福德郡”
},
{
姓名：“Max”，
年龄:"2岁"，
性别：“男”，
品种：“拳击手”
}
]
};
removeRow=name=>{
this.setState（（{data}）=>({
data:data.filter（el=>el.name！==name）
}));
};
render（）{
让列=[
{
标题：“姓名”，
属性：“名称”
},
{
标题：“年龄”，
财产：“年龄”
},
{
标题：“性”，
财产：“性”
},
{
标题：“繁殖”，
属性：“繁殖”
},
{
标题：“，
removeCol：对
}
];
返回(
);
}
}
const Table=（{columns，data，removeRow，propertyAsKey}）=>(
{columns.map（col=>(
{col.heading}
))}
{data.map（项=>(
{columns.map（col=>{
if（col.removeCol）{
返回(
removeRow（项目名称）}>
删除行
);
}否则{
返回(
{item[col.property]}
);
}
})}
))}
);
render（，document.getElementById（“根”））

这些答案对你有用吗？如果是这样的话，这是一个不错的解决方案。但是，它也使表成为非通用表，并且不可重用。我想以某种方式只给这个表一个组件，这样，如果需要的话，这个表可以在将来使用。这将允许在表中放置非按钮的其他元素/组件