如何在同一页面上的多个实例上使用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

我在下面提供一种解决方案。 我不确定您是否要查看用户输入的方程的解，因为使用输入和onChange函数可以很容易地做到这一点。 无论如何，以下内容基于我所理解的问题。

一些注意事项：

• 使用'var'已使'let'和'const'倒退。 在上阅读有关此内容的更多信息。 在JavaScript中使用“ let”和“ var”声明变量有什么区别？
• 由于我没有将props数据保存到状态中，因此不需要实际的构造函数。
• 我没有绑定我的函数，因为我正在使用没有自己的“ this”的箭头函数
• 我创建了有关公式和答案的字典，我认为这将使您更容易扩展。
• 根据您的文件结构，您可能需要为App and Calculate组件添加导出。

import React, { Component } from 'react';

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 />);