如何更改 React 中元素的样式？

【问题标题】：How to change the style of an element in React?如何更改 React 中元素的样式？
【发布时间】：2016-02-09 04:12:26
【问题描述】：

我是 Reactjs 的新手，我的 td 方法中有一个 td：

<td style={{cursor: 'pointer'}} onClick={} key={i}>

点击这个td，我想改变它的样式，在react js中应该怎么做？

谢谢。

编辑：

这是我通过td生成的：

{this.props.posts.map((service, i) =>
     <tr>
        <td style={{cursor: 'pointer'}} key={i}>
           <span> {posts.createdBy} </span>
        </td>
     </tr>
)}

【问题讨论】：

是它自己的 react 组件还是更大的组件的一部分？
@JonahWilliams：它自己的反应组件。
你应该有一个像{style: {cursor: 'pointer'}}这样的initState，并使用style={this.state.style}，然后在onclick中，使用setState将该样式更改为{cursor: 'crosshair'}...等其他样式。
可能与this question重复

标签： javascript reactjs

【解决方案1】：

对于现代反应：

import { useState } from 'react';

const App = () => {

  const [ color, setColor ] = useState('#fff');
  const [ backgroundColor, setBackgroundColor ] = useState('#f44');

  return (
    <p style={{ 'color': color, 'backgroundColor': backgroundColor }} >
      Hello world
    </p>
  );
};

export default App;

【讨论】：

【解决方案2】：

您实际上可以使用 React.createRef 以编程方式执行此操作，然后使用函数使用 referencedElement.style.someStyle = style 更改元素。

【讨论】：

【解决方案3】：

不要使用内联样式，内联样式太贵了。使用默认的.css。

table.css : 维护两个类

.td {cursor: 'pointer'}

.td-clicked {
 //your classAtributes
}

index.js：维护每个td 的唯一键。如果用户单击了一个 td，则使用 onClick 侦听器更改该特定 td 的类。

import React, { useState } from "react";
import './table.css';
const Table = () => {
  const [clickTd, setClickedTd] = useState(null);
  return (
    <>
      {this.props.posts.map((service, i) => {
        return (
          <tr>
            <td
              className={clickId == i ? "td-clicked" : "id"}
              key={i}
              onClick={() => setClickId(i)}
            >
              <span> {posts.createdBy} </span>
            </td>
          </tr>
        );
      })}
      )}
    </>
  );
};

【讨论】：

【解决方案4】：

@karthick krishna 。我根据您的问题创建了一个演示。 td 将在用户单击帖子列表的日期列时被选中。

class PostList extends React.Component {
  constructor() {
    super();
    this.state = { selectedPost: {} };
  }
  render() {
    return (
      <table>
        {this.props.posts.map(post => (
          <tr key={post.id}>
            <td>{post.title}</td>
            <td
              className={
                this.state.selectedPost.id === post.id ? "selected" : ""
              }
              onClick={this.selectPost.bind(this, post)}
              style={{ cursor: "pointer" }}
            >
              <span>{post.createdBy}</span>
            </td>
          </tr>
        ))}
      </table>
    );
  }

  selectPost(selected) {
    if (selected.id !== this.state.selectedPost.id) {
      this.setState({ selectedPost: selected });
    } else {
      this.setState({ selectedPost: {} });
    }
  }
}

const postData = [
  { id: "1", title: "jQuery is great", createdBy: "2019-01-15" },
  { id: "2", title: "ES6 is cool", createdBy: "2019-02-15" },
  { id: "3", title: "Vuejs is awesome", createdBy: "2019-03-15" }
];
const element = (
  <div>
    <h1>Post List</h1>
    <PostList posts={postData} />
  </div>
);
ReactDOM.render(element, document.getElementById("root"));

.selected {
  background-color: rgba(217, 83, 79, 0.8);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

【解决方案5】：

您可以轻松注入内联样式更新状态或任何 CSS 对象代表。

将它与静态 CSS 类（示例中的 ClassName）结合起来。

    constructor(props) {
    super(props);
    this.filters = {filter: 'blur(5px)'};
    this.state = {
        filters: {filter: 'blur(5px)'}
    };
}

使用您选择的任何触发器注入的 CSS 对象：

<img src="/static/back.jpg" className={'background'} style={this.filters}></img>

或者使用 setState() 触发更新状态：

<img src="/static/back.jpg" className={'background'} style={this.state.filters}></img

【讨论】：

【解决方案6】：

当然假设所有其他鸭子都是有序的，您可以在组件状态中跟踪类，然后在 onClick 事件中使用逻辑更新状态。

var TableData = React.createClass({
  getInitialState: function() {
    return {
      class: 'pointer'
    };
  },
  changeStyle: function(e) {
    if (this.state.class === 'pointer') {
      this.setState({class: 'not pointer'});
    } else {
      this.setState({class: 'pointer'});
    }
  },
  render: function() {
    return (
      <td style={ cursor: {this.state.class} }
          onClick={this.changeStyle}
          key={i}>
      </td>
    );
  }
});

【讨论】：

其实我有很多td元素，我只想更改被点击的td，而其他td样式不应该更改。
所以每个不是它自己的反应组件？如果你不分享你的代码或者你的环境不清楚，我帮不了你
是的，它们属于同一个反应组件。