React动态创建打开相应模式的按钮

import React from 'react';

const DynamicButton = ({ mode, onClick }) => {
  return (
    <button onClick={onClick}>
      {mode === 'edit' ? '编辑模式' : '查看模式'}
    </button>
  );
};

export default DynamicButton;

import React, { useState } from 'react';
import DynamicButton from './DynamicButton';

const ParentComponent = () => {
  const [mode, setMode] = useState('view');

  const handleClick = () => {
    setMode(mode === 'view' ? 'edit' : 'view');
  };

  return (
    <div>
      <DynamicButton mode={mode} onClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

import React from 'react';
import ReactDOM from 'react-dom';
import ParentComponent from './ParentComponent';

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