Question

我想在 reactjs 中创建一个数组数组并进行渲染。目前，我有一个数组，然后将一个组件推入该数组，它在屏幕上呈现。但是我想要的是在做出第二选择之后，应该在屏幕上同时看到第一和第二部分。

renderQuestions=()=>{
    let questions=[];
    console.log('rating',this.state.ratingType);


    if(this.state.ratingType=== '1'){
        questions.push(<NumberRating/>);
    }
    else if (this.state.ratingType === '2' ){
        questions.push( <StarRating/>);
    }
    else if (this.state.ratingType === '3'){
        questions.push( <PollRating/>);
    }

    console.log('Questions',questions);
    console.log('Length',questions.length);
    return questions;

}

在内部渲染中，我有

render(){
   return(
     <RaisedTextButton
                titleColor="white"
                title={'Add Question'}
                onPress={() => this.openDialog()}
            />
            <FormDialog
                title={'Select the kind of rating'}
                visible={this.state.visible}
                onRequestClose={()=>this.submitDialog()}
                onSubmit={()=>this.hideDialog()}

            >
                <Select
                    label='Label '
                    options={[
                        {_id: '1', name: 'NumberRating'},
                        {_id: '2', name: 'StarRating'},
                        {_id:'3', name: 'PollRating'}
                    ]}
                    labelKey="name"

                    onChange={(value) =>this.questionType(value)}
                    valueKey="_id"
                    isValueObject={!false}
                />
            </FormDialog>
               {this.renderQuestions()}
            </View>
  );}

请注意，我的渲染中有一个按钮，按下此按钮时，state.ratingType会更改。

Answer 1

return (
   <React.Fragment>
      {this.renderQuestions().map(question => question)}
   </React.Fragment>
)

在这里，this.renderQuestions（）返回数组。这需要用单节点包装（无论是div还是如果不必使用div，都可以使用React.Fragment）

Answer 2

使用此代码更改您的return代码。实际上，当您调用render()的方法ID返回时，它应该返回jsx或一些文本。但是数组是js变量，我们本身不会将其拆分为render()的一部分。您需要将数组中的每个组件放入容器中，然后将其返回

return (
            <div className="container">
            {questions.map(question => (question))}
            </div>
        )

Answer 3

您可以在组件的状态中有一个array，单击该按钮时可以保存ratingType选择，并且在基于数组的render()中可以显示组件。

Constructor(){
  super();
  this.state={
    questions:[]
  }
}

Answer 4

一个想法；您的if-else-if分支只能允许您呈现一种ratingTypes。这是故意的吗？这与渲染列表无关。只是JavaScript。

呈现列表的两个选项：

import React, { Component } from 'react'

class App extends Component {

  renderQuestions() {
    return [
      'a', 'b', 'c'
    ]
  }

  renderQuestionElements() {
    return [
      (<div>1</div>),
      (<div>2</div>),
      (<div>3</div>)
    ]
  }

  render() {
    const questions = this.renderQuestions()
    return (
      <React.Fragment>
        {questions.map((value, index) => (<div key={index}>{ value }</div>))}
        {this.renderQuestionElements()}
      </React.Fragment>
    )
  }
}

export default App;

在reactjs中渲染数组的数组

4 个答案: