如何解决在Blade foreach中重用ReactJS组件
我有一个名为“ IssueRating”的组件,我希望能够调用此组件,以便每个foreach记录都可以调用此“ IssueRating”组件。目前,只有第一条记录正在输出分数。
刀片模板
@foreach($issues as $issue))
<div class="row>
<div id="issue-rating" data="{{ $issue->key }}"></div>
<a href="/{{ $issue->key }}" target="_blank">
{{ $issue->fields->summary }}
</a>
</div>
@endforeach
反应组件
class IssueRating extends React.Component {
constructor(props) {
super(props);
this.state = {
score: ""
}
}
componentDidMount() {
fetch("/../api/***/issue/score/"+this.props.data)
.then(res => res.json())
.then(
(result) => {
this.setState({
status: "okay",score: result.score,});
},(error) => {
this.setState({
status: error,});
}
)
}
render() {
return (
<div className="test">{this.state.score}</div>
)
}
}
if (document.getElementById('issue-rating')) {
var data = document.getElementById('issue-rating').getAttribute('data');
ReactDOM.render(<IssueRating data={data}/>,document.getElementById('issue-rating'));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。