在Blade foreach中重用ReactJS组件

我将这个组件称为“发布”组件，我希望能够调用这个组件，这样每个foreach记录都可以调用这个“发布”组件。目前只有第一条记录输出分数

刀片模板

@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

@foreach（$issue作为$issue发行））
键}}“>
@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'));
}

类发布扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
分数：“
}
}
componentDidMount（）{
获取（“/../api/***/issue/score/”+this.props.data）
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
状态：“好的”，
分数：result.score，
});
},
（错误）=>{
这是我的国家({
状态：错误，
});
}
)
}
render（）{
返回(
{this.state.score}
)
}
}
if（document.getElementById（'issue-rating'））{
var data=document.getElementById（'issue-rating'）.getAttribute（'data'）；
ReactDOM.render（，document.getElementById（'issue-rating'））；
}

嗯，您的第一个问题是id是唯一的；因此无论您重复使用多少次，id=“issue rating”都只针对一个元素：）谢谢Tim。我也尝试过使用HTML类，但在这个过程中遇到了问题。