使用CustomApp时在管线中列出和编辑元件所需的道具

import React from 'react';

class PipelineComponent extends React.Component {
  render() {
    const { id, name, type, onEdit } = this.props;
    return (
      <div>
        <h3>{name}</h3>
        <p>Type: {type}</p>
        <button onClick={() => onEdit(id)}>Edit</button>
      </div>
    );
  }
}

class PipelineEditor extends React.Component {
  state = {
    components: [
      { id: 1, name: 'Component A', type: 'Type1' },
      { id: 2, name: 'Component B', type: 'Type2' }
    ]
  };

  handleEdit = (id) => {
    console.log('Editing component with id:', id);
    // 这里可以添加编辑逻辑
  };

  render() {
    return (
      <div>
        {this.state.components.map(component => (
          <PipelineComponent
            key={component.id}
            id={component.id}
            name={component.name}
            type={component.type}
            onEdit={this.handleEdit}
          />
        ))}
      </div>
    );
  }
}

export default PipelineEditor;

class PipelineEditor extends React.Component {
  // ...
  handleEdit = (id) => {
    console.log('Editing component with id:', id);
    // 确保这里的逻辑正确
  };
  // ...
}