反应形式的动态选项值

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() {&nbsp; someState [/*with items*/]&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <Layout title={'CM Info'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<CmView options={options} />&nbsp; &nbsp; &nbsp; </Layout>&nbsp; &nbsp; </div>&nbsp; )&nbsp;}并在这里循环：import React from 'react'export default function CmView({ options }) {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {options.map(option => (<option>{option.name}</option>)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}