javascript - ReactJs 如何从不同页面向表添加行

Question

我正在制作一个应用程序，其中一页上有一个表格，我需要通过单击按钮从不同页面向该表格添加一行。我的页面使用reactstrap和reactjs，我已经导出了所有页面，并且可以通过单击按钮来呈现它们。

表格页面示例:文件名table.js

class table extends Component {
  render() {
    return (
            <table>
            <thead>
              <tr>
                <th>row1</th>
                <th>row2</th>
                <th>row3</th>
                <th>row4</th>
                <th>row5</th>
              </tr>
            </thead>

            <tbody>
                <tr>
                  <td scope="row">1</td>
                  <td>text</td>
                  <td>text</td>
                  <td>text</td>
                  <td>text</td>
                </tr>
            </tbody>
)
};
export default table;

我需要此页面的代码，例如 - example.js

class addRow extends Component {
  I need the function that will add a row to table.js on button click

   render() {
     return(
        <Button>this button will add a row to table.js</Button>
     )
   };
 }
 export default addRow;

在此页面上，我需要将代码放入 table.js 页面上的行。 它本质上会向表中添加一行，从 example.js 到 table.js

是否有人可以将我联系到或解释我如何做到这一点？

Answer 1

如果 AddRow 旨在成为 Table 的子组件，那么您可以将方法作为 prop 向下传递，如下所示:

class Table extends Component {
    addRow = () => {
        // code to add row to table
    }
    render() {
        return (
            <table> ... </table>
            <AddRow addRow={this.addRow}/>
        )
    };
}

class AddRow extends Component {
    render() {
        return (
            <button onClick={this.props.addRow}>Add Row</button>
        )
    }
}