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

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>
    )
  }

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

Answer 1

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

然后将 map() 移动到渲染函数的 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>
)