React 中的类和 id - Javascript

在 React 中，我们可以使用类和 id 来定位元素以及对元素进行样式定义。通过使用类和 id，我们可以轻松地为 React 组件添加样式，同时也可以使样式维护更加简单。

类

在 React 中，class 被用于设定组件的样式。可以通过以下两种方式来为组件添加 class：

• 通过 props 属性
• 直接在组件中添加

通过 props 属性

我们可以在组件内部通过 props 属性来添加 class，如下所示：

function MyComponent(props) {
  return (
    <div className={props.class}>
      Hello, World!
    </div>
  );
}

ReactDOM.render(
  <MyComponent class="my-class" />,
  document.getElementById('root')
);

在这个例子中，我们创建了一个名为 MyComponent 的组件。通过将 class 属性传递给 MyComponent，我们可以在组件内部使用它来添加样式。

直接在组件中添加

我们也可以在组件内部直接添加 class，如下所示：

class MyComponent extends React.Component {
  render() {
    return (
      <div className="my-class">
        Hello, World!
      </div>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

在这个例子中，我们创建了一个继承自 React.Component 的 MyComponent 类。通过在 div 元素中添加 className 属性，我们可以为组件添加样式。

id

在 React 中，id 被用于定位特定的元素。我们可以通过以下两种方式来为元素添加 id：

• 通过 props 属性
• 直接在组件中添加

通过 props 属性

我们可以在组件内部通过 props 属性来添加 id，如下所示：

function MyComponent(props) {
  return (
    <div id={props.id}>
      Hello, World!
    </div>
  );
}

ReactDOM.render(
  <MyComponent id="my-id" />,
  document.getElementById('root')
);

在这个例子中，我们创建了一个名为 MyComponent 的组件。通过将 id 属性传递给 MyComponent，我们可以在组件内部使用它来为元素添加 id。

直接在组件中添加

我们也可以在组件内部直接添加 id，如下所示：

class MyComponent extends React.Component {
  render() {
    return (
      <div id="my-id">
        Hello, World!
      </div>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

在这个例子中，我们创建了一个继承自 React.Component 的 MyComponent 类。通过在 div 元素中添加 id 属性，我们可以为元素添加 id。

结论

在 React 中，类和 id 都是非常强大的工具，可以帮助我们轻松地为组件添加样式以及定位特定的元素。但是，我们应该谨慎地使用它们，避免出现命名冲突以及对样式的不必要修改。