时间戳

首页 > 解决方案 > 反应形式的动态选项值

javascript - 反应形式的动态选项值

问题描述

我有一个组件，我在其中获取一些数据。该数据必须以表单的形式显示为选择的选项值部分。所以我获取的数据将是选项。

数据来自的组件是这个：

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

问题是，传递数据的最佳方式是什么？我是在第一个组件中循环还是将数据作为道具传递？我试图实现容器视图模式，其中视图仅用于显示数据。

标签： javascriptreactjsjsx

解决方案

您可以将数据作为数组传递并在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>
    )
}

推荐阅读