Question

我有一个Table React组件，该组件呈现了下表。这个Table类收到一个名为array的prop，可以说其中有10个元素。因此，我基本上要遍历array并将每个元素添加到新行中。我想做的是，当用户单击应用程序中的特定按钮时，标识为foo的列应变为黄色。

class Table extends React.Component {
  render() {
    return (
      <table>
          <thead>
            <tr><th>Heading 1</th></tr>
          </thead>
          <tbody>
            {this.props.array.map(element =>
              <tr key={element}>
                <td id="foo">{element}</td>
              </tr>
            )}
          </tbody>
      </table>
    );
  }
}

现在，我正在尝试执行以下操作：

class Bar extends React.Component {
  row;

  componentDidMount() {
    this.row = document.getElementById("foo");
  }

  render() {
    return {
      <button onClick={(event) => {
        this.update();
      }}>I will turn the #foo column yellow!
      </button>
    }
  }

  update() {
    this.row.classList.add('yellow-color');
  }
}

CSS：

.yellow-color {
  background-color: yellow;
}

但是，它不会将该列变成黄色。有谁知道为什么会这样吗？我该如何解决这个问题？谢谢！

Answer 1

您不应该在React中使用document.getElementById（）。您可以使用Refs来达到类似目的，尽管不建议这样做。

使用状态和传递道具可以达到相同的目的。

class Table extends React.Component {
  state = {
    color: "black"
  };
  update = () => {
    this.setState({
      color: "yellow"
    })
  }
  render() {
    return (
      <div>
      <button onClick={(event) => {
        this.update();
      }}>I will turn the #foo column yellow!
      </button>
      <table>
          <thead>
            <tr><th>Heading 1</th></tr>
          </thead>
          <tbody>
            {this.props.array.map(element =>
              <tr key={element}>
                <td style={{ backgroundColor: this.state.color }}>
                  {element}
                </td>
              </tr>
            )}
          </tbody>
      </table>
      </div>
    );
  }
}

ReactJS-使用数组时如何设置标签样式？

1 个答案: