组件更新了参数 '作主题

该组件更新了参数 '作主题'，可以通过设置该参数来改变组件的主题。

介绍

组件是一种可以在程序中重复调用的独立单元。该组件可以自动根据传入的参数渲染出不同的主题样式。

用法示例

<MyComponent theme="dark" />

参数说明

• theme (string): 组件的主题样式。可选值为 'light' 或 'dark'。

注意事项

• 组件的主题样式必须在组件初始化时设置，否则默认为 'light'。
• 组件更新参数 '作主题' 后，需要重新渲染组件才能看到变化。
• 组件的主题样式只影响组件本身，不会影响其他组件或页面。

示例代码

下面是一个实现了组件主题功能的示例代码：

import React, { useState } from 'react';

const MyComponent = ({ theme }) => {
  const [currentTheme, setCurrentTheme] = useState(theme);

  const handleThemeChange = () => {
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    setCurrentTheme(newTheme);
  };

  return (
    <div className={`my-component ${currentTheme}`}>
      <h2>My Component</h2>
      <button onClick={handleThemeChange}>Change Theme</button>
    </div>
  );
};

export default MyComponent;

你可以通过在父组件中传入不同的 '作主题' 参数来改变组件的主题样式。

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <MyComponent theme="dark" />
      <MyComponent theme="light" />
    </div>
  );
};

export default App;

该示例中的组件会根据传入的 '作主题' 参数渲染出不同的主题样式。