Как передать реквизит динамически? - PullRequest
Новая
       18

Как передать реквизит динамически?

0 голосов
/ 09 октября 2019

Я пытаюсь научиться использовать реактивные опросы (для дальнейшего общения с бэкендом, поэтому некоторые фрагменты моего кода подготовлены для следующих шагов). Проблема в том, что я ожидаю увидеть 123 в моем браузере (как в componentDidMount), но не вижу.

Когда я передаю строку «123» вместо const pollQuestion = props => (<div>{props.quest}</div>);, она работает. 

//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;

Ответы [ 2 ]

2 голосов
/ 09 октября 2019

Проблема в том, что вы не передали значение this.props.quest элементу pollQuestion. Либо сделать это 

<Poll question={this.props.quest} answers={pollAnswers} onVote={this.handleVote} />

См. Код здесь: https://stackblitz.com/edit/react-nngrut

ИЛИ сделать это 

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

Кроме того, все реагируюткомпоненты должны начинаться с заглавной буквы.

0 голосов
/ 09 октября 2019

Атрибут вопроса

React-Опросы имеет тип строки

, и вы

пытаетесь передать элемент реагирования

, поэтому он не работает.

Передайте строку вопроса напрямую.

...