React 基础面试题, 在 React 的 JSX 中,如何使用自定义属性?

Step 1

Q:: 在 React 的 JSX 中，如何使用自定义属性？

A:: 在 React 的 JSX 中，自定义属性可以通过在 JSX 元素上添加属性来实现。属性名可以是自定义的，但必须符合 camelCase 命名规则，并且不能与 HTML 和 SVG 标准属性冲突。例如：<div data-custom-attribute="value">。这些属性可以通过 props 在组件内部访问。

Step 2

Q:: 为什么在 JSX 中使用自定义属性？

A:: 自定义属性通常用于为元素添加额外的数据，方便在组件内或组件间传递信息。这些信息可以在组件的生命周期内使用，或者传递给子组件进行特定的处理。

Step 3

Q:: 如何在组件中访问自定义属性？

A:: 在组件中，可以通过 props 对象来访问自定义属性。假设在 JSX 中定义了一个自定义属性 data-custom-attribute，那么可以通过 this.props['data-custom-attribute'] 或 props['data-custom-attribute'] 来访问它的值。

Step 4

Q:: 如何在组件内修改自定义属性？

A:: React 本身不允许直接修改 props，因为 props 是只读的。如果需要修改自定义属性，通常会通过父组件传递新的属性值来更新子组件，或者通过状态（state）管理在组件内的值变化。

Step 5

Q:: 在 JSX 中是否有自定义属性的命名限制？

A:: 自定义属性的命名需要遵循 camelCase 规则，不能与已有的 HTML 或 SVG 属性重名。此外，避免使用保留字（如 class、for 等）作为自定义属性名。