javascript - 如何在同一页面上的多个实例上使用 React 组件？

Question

我有一个纯 HTML 页面(非 React 应用程序的一部分)，其中包含一些表示简单数学计算的文本。有<span>包含公式的元素及其旁边的 <span>里面有计算的元素。每个跨度都用一个通用类表示，要么 formula或calculation还有一个特定的类，例如 formula-1和calculation-1 。请注意，对于关联的公式和计算，类中的数字始终相同。这些计算的数量也是动态的；一页上可能有 1 个，也可能有 30 个。

我正在使用 React 组件来替换 calculation跨越 button元素，当单击按钮时，它会重新渲染以显示计算值。下面显示了一些示例 HTML 和 JS。

这个解决方案有效，但我的问题是它感觉很脏。我对 React 很陌生，JavaScript 不是我的主要语言，但在我看来，每个计算元素都应该由组件的一个实例表示，而不是循环遍历页面上所有计算的单个组件，渲染每个。

所以我的问题是:就如何使用 React 而言，以下工作解决方案是否不正确？如果是，那么普遍接受的正确方法是什么？

<span class="formula formula-1" data-calculation="4">2 + 2</span> = <span class="calculation calculation-1>4</span>
<span class="formula formula-2" data-calculation="6">2 + 4</span> = <span class="calculation calculation-2>6</span>
<span class="formula formula-3" data-calculation="22">2 + 20</span> = <span class="calculation calculation-3>22</span>

我创建了一个 React 组件来替换

import React, {Component} from "react";
import ReactDOM from "react-dom";

class Calculate extends Component {

  constructor() {
    super();
    this.viewSolution = this.viewSolution.bind(this);
    this.state = {
      calculations: []
    };
    let formula_elements = document.getElementsByClassName('formula');
    for (var i = 0; i < formula_elements.length; i++) {
      this.state.calculations[i] = formula_elements[i].getAttribute('data-calculation');
    }
  }

  viewSolution(event) {
    this.setState({
      clicked: true
    });
  }

  render() {
    if (this.state.clicked === true) {
      return (
        <span>{this.state.calculations[this.props.index]}</span>
      );
    }
    return (
      <button className="btn" onClick={this.viewSolution}>View solution</button>
    );
  }

}

export default Calculate;

const calculation_elements = document.getElementsByClassName('calculation');

for (var i = 0; i < calculation_elements.length; i++) {
  ReactDOM.render(<Calculate index={i}/>, calculation_elements[i]);
}

Answer 1

我在下面提供了一种解决方案。我不确定您是否想要查看用户输入的方程的解，因为这可以通过使用 input 和 onChange 函数轻松完成。无论如何，下面的内容是基于我对问题的理解。

一些注释:

• “var”的使用已经让位于“let”和“const”。欲了解更多相关信息，请访问 What's the difference between using "let" and "var" to declare a variable in JavaScript?
• 由于我没有将 props 数据保存到状态中，因此不需要实际的构造函数。
• 我没有绑定(bind)我的函数，因为我使用的箭头函数没有自己的“this”
• 我创建了一个包含公式和答案的字典，我认为这可以让您更轻松地进行扩展。
• 根据您的文件结构，您可能需要添加应用和计算组件的导出。

从 'react' 导入 React, { Component };

class Calculate extends Component {
  state = {
    clicked: false
  };

  viewSolution = event => this.setState({ clicked: true });

  render() {
    const { clicked } = this.state;
    const { answer, calculation } = this.props;

    const element = clicked
      ? <span> = { answer }</span>
      : <button
          className='btn'
          onClick={ this.viewSolution }>
          View solution
        </button>;

    return <div>
      <span>{ calculation }</span>
      { element }
    </div>;
  }

}

class App extends Component {
  render() {
    const formulae = {
      ['2 + 2']: 4,
      ['2 + 4']: 6,
      ['2 + 20']: 22
    };

    return <div>
      {
        Object.keys(formulae).map((calculation, key) => (
          <Calculate
            answer={formulae[calculation]}
            calculation={calculation}
            key={key} />
        ))
      }
    </div>
  }
}

ReactDOM.render(<App />);