我有一段React的代码段，它在div元素root上呈现
class Body extends React.Component {
constructor(props) {
super(props);
this.state = {
data : [],
}
}
componentDidMount(){
this.postdata()
}
postdata(){
var initial_data = {'id': 1, 'model-name': 'Joke'}
var self = this;
fetch("\start-jokes\/", {
body: JSON.stringify(initial_data),
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST',
mode: 'cors',
redirect: 'follow',
referrer: 'no-referrer',
})
.then(response => response.json()).then((json) => { console.log( json )
self.setState({ data : json['jokes'] })
})
}
render(){
return(
<div>
{this.state.data.length == 0 &&
<div> No options available.</div>
}
{this.state.data.length > 0 &&
<div className="container" id="jokes">
{this.state.data.map(function(item,i){
return(
<div key={item['key']} className="card col-md-7">
<div className="card-body">
{item['text']}
<p><span className="badge badge-secondary">{item.name}</span></p>
</div>
</div>
)
})}
</div>
}
</div>
)
}
}
// ========================================
ReactDOM.render(
<Body />,
document.getElementById('root')
);
<div id="root" class="top-padding">
</div>
我还想更新另一个响应元素，该元素应该跟踪笑话类型和最后使用的ID（从服务器发回），以便下次调用它可以从那里继续。它在开始时用1初始化。
class SideNav extends React.Component {
constructor(props) {
super(props);
this.state = {
joke_id : 1,
dadjoke_id: 1,
tweet_id: 1
}
}
}
应该链接到这个html元素
<div id="side-nav">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" value="Joke" ref_id="{joke_id}" checked> Joke
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off" value="DadJokes" ref_id="{dadjoke_id}"> DadJokes
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off" value="Tweet" ref_id="{tweet_id}"> Tweet
</label>
</div>
<div class="col-md-12 top-padding" align="center">
<span class="oi oi-reload"></span>
</div>
</div>
其中每个单选按钮都有一个属性ref_id，该属性应与构造函数中的一个初始值匹配。
任何有关如何统一使用这两者的帮助将不胜感激。