我如何在React类组件中传递一个prop来完成我的端点的URL ?

Question

我使用下面的URL(端点)，以获取数据，我需要创建一个图表。如何从"外部"完成URL ?带URL工作所需的符号的类?

代码:

export default class HighLowChart extends Component{
constructor(props){
super();
this.state = {data: []}
}

componentDidMount() {
// const endpoint = 'https://www.randyconnolly.com/funwebdev/3rd/api/stocks/history.php?symbol=amzn';
const endpoint = `https://www.randyconnolly.com/funwebdev/3rd/api/stocks/history.php?symbol=${this.props}`;

fetch(endpoint)
.then(response => response.json())
.then(data => {this.setState({data:data})
})
}

注释的端点工作，但是当我在我的页面上使用HighLowChart组件时，我希望能够从提供它一个道具来完成URL，如果这是可能的。像下图:

<Box sx={{marginBottom: "2rem" }}>
<HighLowChart props={symbol}/>
</Box>
//where symbol in this case would be 'amzn'

谢谢!

Answer 1

始终以上述方式将props共享给父/子组件。所以在HightLowChart组件中你的组件会收到这样的道具

• this.props.symbol