[英]How to pass the props dynamically?
I am trying to learn how to use react-polls (for further communication with backend, so, some fragments of my code are prepared for next steps).我正在尝试学习如何使用 react-polls(为了与后端进行进一步的通信,因此,我的一些代码片段已为下一步准备)。 The problem is: I expect to see 123 in my browser (as in componentDidMount), but I don't.
问题是:我希望在我的浏览器中看到 123(如在 componentDidMount 中),但我没有。
When I pass the string '123' directly instead of const pollQuestion = props => (<div>{props.quest}</div>);
当我直接传递字符串 '123' 而不是
const pollQuestion = props => (<div>{props.quest}</div>);
it works.有用。
//imports
import Poll from 'react-polls';
const pollQuestion = props => (<div>{props.quest}</div>);
const pollAnswers = [
{ option: 'Yes', votes: 8 },
{ option: 'No', votes: 2 }
]
class PollQuestion extends Component {
state = {
pollAnswers: [...pollAnswers]
}
handleVote = voteAnswer => {
const { pollAnswers } = this.state
const newPollAnswers = pollAnswers.map(answer => {
if (answer.option === voteAnswer) answer.votes++
return answer
})
this.setState({
pollAnswers: newPollAnswers
})
}
render () {
const { pollAnswers } = this.state
return (
<div>
<Poll question={pollQuestion} answers={pollAnswers} onVote={this.handleVote} />
<p>It works</p>
</div>
);
}
};
class QuestionList extends Component {
state = {
questions: []
}
componentDidMount(){
this.setState({ questions: [{question_text:'123'}]});
}
render(){
return (
<div>{this.state.questions?
<ul>
<PollQuestion quest={this.state.questions.slice(0, 1).map(question => <li>{question.question_text}</li>)} />
</ul>:null}
</div>
)
}
};
function AppV() {
return (
<div className="App">
<QuestionList/>
</div>
);
}
export default AppV;
The problem was you were not passing the value of this.props.quest to the pollQuestion element.问题是您没有将 this.props.quest 的值传递给 pollQuestion 元素。 Either do this
要么这样做
<Poll question={this.props.quest} answers={pollAnswers} onVote={this.handleVote} />
See code here: https://stackblitz.com/edit/react-nngrut请参阅此处的代码: https://stackblitz.com/edit/react-nngrut
OR do this或者这样做
Edit
const pollQuestion = props => (<div>{props.quest}</div>); to
const MyPollQuestion = props => (<div>{props.quest}</div>);
<Poll question={<MyPollQuestion quest={this.props.quest} />} answers={pollAnswers} onVote={this.handleVote} />
https://stackblitz.com/edit/react-sxf2kx?file=AppV.js https://stackblitz.com/edit/react-sxf2kx?file=AppV.js
Also, All react components should start with a capital letter.此外,所有反应组件都应以大写字母开头。
The这
React-Polls question attribute has Proptype of string
React-Poll 问题属性的 Proptype 为字符串
and you are你是
trying to pass a React Element
试图传递一个 React 元素
to it that is why it is not working.对它来说,这就是它不起作用的原因。
Pass you question string directly.直接将问题字符串传递给您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.