使用样式化组件中的字符串连接属性值

import React, { useState } from 'react';

const Button = () => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(!isActive);
  };

  const buttonStyle = {
    backgroundColor: isActive ? 'blue' : 'red',
    color: 'white',
    padding: '10px',
  };

  return (
    <button style={buttonStyle} onClick={handleClick}>
      {isActive ? 'Active' : 'Inactive'}
    </button>
  );
};

import React, { useState } from 'react';

const Input = () => {
  const [placeholder, setPlaceholder] = useState('');

  const handleChange = (event) => {
    setPlaceholder(event.target.value);
  };

  return (
    <input
      type="text"
      placeholder={`Enter ${placeholder}`}
      onChange={handleChange}
    />
  );
};