基于 props 有条件地改变样式组件 - Javascript

在React中，我们经常需要根据特定条件来控制组件的样式。如果使用React内联样式，那么通过props来控制样式将变得非常容易和灵活。

1. 创建有条件样式组件

下面是一个简单的有条件样式组件，它接受一个名为isActive的布尔型prop，并根据该属性来确定样式。

import React from 'react';

const ConditionalStyles = (props) => {
  const { isActive } = props;
  const styles = {
    background: isActive ? 'green' : 'red',
    color: 'white',
    padding: '10px',
    borderRadius: '5px',
    cursor: isActive ? 'pointer' : 'default'
  };
  return (
    <div style={styles}>
      {isActive ? 'Active' : 'Inactive'}
    </div>
  );
};

export default ConditionalStyles;

2. 使用有条件样式组件

我们可以像使用任何其他组件一样使用ConditionalStyles组件，并在isActive属性中传递一个布尔值来控制样式。

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

const App = () => {
  return (
    <div>
      <ConditionalStyles isActive={true} />
      <ConditionalStyles isActive={false} />
    </div>
  );
};

export default App;

3. 样式对象

在ConditionalStyles组件中，我们创建了一个名为styles的样式对象来根据条件渲染样式。这个对象包含了我们希望控制的所有样式属性。

const styles = {
  background: isActive ? 'green' : 'red',
  color: 'white',
  padding: '10px',
  borderRadius: '5px',
  cursor: isActive ? 'pointer' : 'default'
};

4. 样式属性

在React中，我们可以将样式对象作为props的一个属性传递给组件。在本例中，我们使用了内联样式。

return (
  <div style={styles}>
    {isActive ? 'Active' : 'Inactive'}
  </div>
);

5. 总结

使用React内联样式可以让我们非常灵活地控制组件的样式。在本例中，我们创建了一个有条件样式的组件，并在isActive布尔prop中传递相应的值，以根据条件控制样式。通过这种方式，我们可以写出高度可定制的React组件，使其非常适合特定的用例。