我有一個問題我無法解決自己的反應。我想要做的是向我的組件添加道具所以我可以一次又一次地使用我的組件，只是用一個相對于變數的字串，所以我可以寫例如
我真的搜索了一些不同的東西，但沒有一個有效。
只是希望你能讓我上。
希望這是有道理的，否則隨時問
我的組件
import React, { Component } from "react";
export default class UserSelections extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
DataisLoaded: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' this.state.value);
event.preventDefault();
}
// ComponentDidMount is used to
// execute the code
componentDidMount() {
fetch(
"URL")
.then((res) => res.json())
.then((json) => {
this.setState({
items: json,
DataisLoaded: true
});
})
}
render() {
const { DataisLoaded, items } = this.state;
if (!DataisLoaded) return <div>
<h1> Vent et ?jeblik... </h1> </div> ;
return (
<div className = "App">
<h1> Fetch data from an api in react </h1>
<form onSubmit={this.handleSubmit}>
<label><select name={this.state.slug} value={this.state.value} onChange={this.handleChange}>
{ --->Need Variable here<--- Down here
items.filter(slug => slug.slug === **'bygnings-st'**).map((item, index) => (
<option value={ item.outputvalue } key={index}>{ item.outputvalue }</option>
))
}</select>
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
import React from "react";
import UserSelections from "./components/UserSelections";
import './App.css';
function App() {
return (
<div className="App">
<UserSelections **Need props here** /> <-------------------
</div>
);
}
export default App;
最好的問候莫騰
uj5u.com熱心網友回復：
如果你想傳遞一個字串作為道具：
const value = "hi";
<UserSelections stringProp={value} />
你用以下方式顯示值：
{this.props.stringProp}
UserSelections 組件內部
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/485899.html
標籤：javascript 反应
下一篇：映射物件陣列僅適用于陣列的副本