反应形式的动态选项值

Question

我有一个组件，我在其中获取一些数据。该数据必须以表单的形式显示为选择的选项值部分。所以我获取的数据将是选项。数据来自的组件是这个：import React from 'react';import Layout from '../Layout/Layout';import CmView from './CmView';export default function CmContainer() {    someState [/*with items*/]    return (        <div>            <Layout title={'CM Info'}>                <CmView/>            </Layout>        </div>    )}并且选择位于另一个名为 CmView 的组件中：import React from 'react'export default function CmView() {    return (        <div>            <form>                <select>                    <option>here comes an item</option>                </select>            </form>        </div>    )}问题是，传递数据的最佳方式是什么？我是在第一个组件中循环还是将数据作为道具传递？我试图实现容器视图模式，其中视图仅用于显示数据。

Answer 1

您可以将数据作为数组传递并在CmView组件中循环。

import React from 'react';

import Layout from '../Layout/Layout';

import CmView from './CmView';

export default function CmContainer() {

  someState [/*with items*/]

  return (

    <div>

      <Layout title={'CM Info'}>

         <CmView options={options} />

      </Layout>

    </div>

  )

 }

并在这里循环：

import React from 'react'

export default function CmView({ options }) {

    return (

        <div>

            <form>

                <select>

                    {options.map(option => (<option>{option.name}</option>)}

                </select>

            </form>

        </div>

    )

}