时间戳

首页 > 解决方案 > 根据父组件中的值动态加载名称

javascript - 根据父组件中的值动态加载名称

问题描述

有一个父组件，其中某些道具（例如名称，queryValue 和图像）到我的子组件，这是一个自定义下拉菜单，到目前为止，我正在根据下拉菜单中默认显示的条件检查显示名称，但现在会有更多数据与标志一起显示。我需要根据 parent 的值显示名称。

父.jsx

<SelectCountry
 options={[
                    {
                        name: 'English (USA)',
                        queryValue: 'en',
                        flagIcon: USA,
                    },
                    {
                        name: 'Bahasa Indonesia',
                        queryValue: 'id',
                        flagIcon: ID,
                    },
                ]}
value={localStorage.getItem('locale')} />

选择国家.jsx

<div className={`${baseClassName}__selected-flag-container`}>
     <img 
        src={require(value === "en" ? '../../assets/USA.svg' : '../../assets/indonesia.svg')} 
        alt='desc' 
      /> 
     {value === "en" ? options[0].name : options[1].name}
</div>


//COde for the Custom DropDown will be here

如上所述，由于只有两种语言，所以已经进行了条件检查及其工作，现在当添加更多语言时，不知道如何选择名称以及动态设置 img 标签中的 src。

标签： javascriptreactjs

解决方案

您所做的一切都有些错误，您Parent.jsx是容器组件，因此它应该包含您的所有逻辑，所以为什么不传递适当的数据。

<SelectCountry
  options={[
    {
      name: 'English (USA)',
      queryValue: 'en',
      flagIcon: USA,
      src: '../../assets/USA.svg'
    },
    {
      name: 'Bahasa Indonesia',
      queryValue: 'id',
      flagIcon: ID,
      src: '../../assets/indonesia.svg'
    },
  ]}
  value={localStorage.getItem('locale')}
/>

& 在您SelectCountry.jsx刚刚展示的演示组件中。

常量 { 选项 } = 要求（'joi'）;

options.map((option) => {
  <div className={`${baseClassName}__selected-flag-container`}>
    <img src={option.src} alt='desc' />
    {option.name}
  </div>;
});

我还没有测试，所以你可能需要调整代码。Dan有一些关于 Redux 的精彩免费课程，他在其中教授更多关于容器和演示组件的内容，您可以在这里查看https://egghead.io/instructors/dan-abramov。希望这对你有帮助️️

推荐阅读