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

Question

我有一个普通的HTML页面(一个无反应的应用程序的一部分)，其中包含一些表示简单数学计算的文本。有包含公式的<span>元素，在它们旁边有<span>元素，并在其中进行计算。每个span都由一个泛型类( formula或calculation )以及一个特定的类(如formula-1和calculation-1 )表示。注意，对于相关的公式和计算，类中的数字总是相同的。这些计算在数量上也是动态的；一页或30页上可能有1。

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

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

因此，我的问题是:下面的工作解决方案在如何使用反应方面是否不正确，如果是的话，普遍接受的正确方式是什么？

<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”中占了次要位置。在What's the difference between using "let" and "var" to declare a variable in JavaScript?上阅读更多有关这方面的信息。
• 因为我没有将道具数据保存到状态，所以我不需要实际的构造函数。
• 我没有绑定我的函数，因为我使用的箭头函数没有自己的‘这个’。
• 我创建了一个公式和答案的字典，我认为它可以让你更容易地进行缩放。
• 根据您的文件结构，您可能需要为App和component组件添加一个导出。

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