Question

我有一个看起来像这样的无状态子功能组件

const MultiChoiceQuestion = props => (
  <div>
    <h1>{props.questionText}</h1>
    <button>{props.choice}</button>
  </div>
)

我希望该组件根据父组件中的数组动态生成按钮。

class CNA extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }

    const choiceArray = ['1', '2', '3']
    choiceArray.map(questionChoice => {
      return questionChoice
    })

  }
  render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
      <MultiChoiceQuestion questionText="Hello" choice={this.questionChoice} />
      </React.Fragment>
    )
  }

所以基本上，因为我的choicesArray中有3个项目，所以我想生成3个按钮。有什么想法吗？

Answer 1

在构造函数中，您应该将choiceArray定义为实例属性，而不仅仅是函数内的var：this.choiceArray = ['1', '2', '3']

然后将map（）移动到render函数的JSX内：

{this.choiceArray.map(questionChoice => <MultiChoiceQuestion questionText="Hello" choice={questionChoice} /> ) }

Answer 2

您可以执行以下操作：

getQuestions = () => {
    return this.choiceArray.map(questionChoice => {
      return <MultiChoiceQuestion questionText="Hello" choice={questionChoice} />
    })
}

render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
      {this.getQuestions()}
      </React.Fragment>
    )
  }

Answer 3

class CNA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      choiceArray: ['1', '2', '3']
    }
  }
  render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
        { this.state.choiceArray.map((choice) => {
            return <MultiChoiceQuestion questionText="hello" choice={choice} />
          })
        }
      </React.Fragment>
    )
  }

Answer 4

这是您可以基于数组创建动态按钮并在单击时选择特定按钮的方法。

class CNA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      choiceArray: ['1', '2', '3']
    }
  }
  handleSelected=selected=>{
    console.log(selected)
  }
  render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
        {this.state.choiceArray.map(choice=>
          <MultiChoiceQuestion questionText="Hello"
           choice={choice} handleClick={()=>this.handleSelected(choice)}/> 
        )}
      </React.Fragment>
    )
  }
}
const MultiChoiceQuestion = props => (
  <div style={{display:'flex'}}>
    <h1>{props.questionText}</h1>
    <button onClick={props.handleClick}>{props.choice}</button>
  </div>
)

Answer 5

这是您可以基于数组创建动态按钮并在单击时选择特定按钮的方法。

class CNA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      choiceArray: ['1', '2', '3']
    }
  }
  handleSelected=selected=>{
    console.log(selected)
  }
  render() {
    return (
      <React.Fragment>
        <p>This is the cna survey</p>
        {this.state.choiceArray.map(choice=>
          <MultiChoiceQuestion questionText="Hello"
           choice={choice} key={choice} handleClick={()=>this.handleSelected(choice)}/> 
        )}
      </React.Fragment>
    )
  }
}
const MultiChoiceQuestion = props => (
  <div style={{display:'flex'}}>
    <h1>{props.questionText}</h1>
    <button onClick={props.handleClick}>{props.choice}</button>
  </div>
)

从无状态功能组件动态渲染按钮

5 个答案: