如何使用 React 在按钮单击时附加表格？

Question

当用户点击一个按钮时，我需要 React 在所述按钮下呈现一个表格。怎么做？

let a = '';

if (this.state.text) {
  a =
    <table border="1" width="40%" cellpadding="5">
      <tr>
        <th>Ячейка 1</th>
        <th>Ячейка 2</th>
      </tr>
      <tr>
        <td>Ячейка 3</td>
        <td>Ячейка 4</td>
      </tr>
    </table>
} else {
  a = ''
}

Answer 1

在您的组件中创建一个具有 onClick 事件侦听器的按钮。然后，相应地调整您控制表格呈现的状态变量（在您的情况下为text 状态变量）。

最后，在渲染函数中，根据状态有条件地渲染表格。

class App extends React.Component {
  constructor(props) {
    super(props)

    // State variables
    this.state = {
      // Controls table rendering
      text: true
    }
  }

  render() {
    return (
      <div>
        {/* Conditionally rendering table */}
        {
          this.state.text ? (
            <table>Table</table>
          ) : ''
        }

        {/* Button with onClick event listener */}
        <button onClick={() => this.setState((state) => {
          return { text: !state.text }
        })}>Button</button>
      </div>
    )
  }
}