如何在React的另一个组件中呈现搜索结果？

// SearchResults.js

import React from 'react';

const SearchResults = (props) => {
  const { searchResults } = props;

  return (
    <div>
      {searchResults.map((result) => (
        <div key={result.id}>
          <h3>{result.title}</h3>
          <p>{result.description}</p>
          <img src={result.image} alt={result.title} />
        </div>
      ))}
    </div>
  );
};

export default SearchResults;

// ParentComponent.js

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

class ParentComponent extends React.Component {
  state = {
    searchResults: [
      { id: 1, title: 'Result 1', description: 'Description 1', image: 'image1.jpg' },
      { id: 2, title: 'Result 2', description: 'Description 2', image: 'image2.jpg' },
      { id: 3, title: 'Result 3', description: 'Description 3', image: 'image3.jpg' },
    ],
  };

  render() {
    const { searchResults } = this.state;

    return (
      <div>
        <h2>Search Results:</h2>
        <SearchResults searchResults={searchResults} />
      </div>
    );
  }
}

export default ParentComponent;