如何将数组值传递给另一个组件?

Question

我想传递品牌。子组件的标题- BrandDetail

这是我的尝试，没有工作，它只是在父组件中呈现子组件，我希望它只在子组件上呈现。

父组件:

class BrandsList extends React.Component {
state = {
brands: [],
};
fetchBrands = () => {
axios.get('http://127.0.0.1:8000/api/brands/').then((res) => {
this.setState({
brands: res.data,
});
});
};
componentDidMount() {
this.fetchBrands();
}
render() {
return (
<div style={{ margin: 22 }}>
{this.state.brands.map((brand) => (
<div key={brand.id}>
<Link to={`/brands/${brand.id}`}>{brand.title}</Link>
<BrandDetail brandName={brand.title} />
</div>
))}
</div>
);
}
}
export default BrandsList;

子组件:

import React, { useEffect, useState } from 'react';
import MyLayout from '../MyLayout/MyLayout';
class BrandDetail extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<MyLayout>
<div>Yes this is the detail page of {this.props.brandName}</div>
</MyLayout>
);
}
}
export default BrandDetail;

Answer 1

UPDATE:这就是我一直在寻找的答案。

{ this.state.brands.map(brand =>
<div key={brand.id}>
<Link to={{
pathname:  `/brands/${brand.title}`,
state: `${brand.title}`,
}}>{brand.title}
</Link>
</div>
)}

和子组件:

<div>Yes this is the detail page of {props.location.state}</div>