Question

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

Parent.jsx

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

SelectCountry.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。

Answer 1

您做的事情有点错误，您的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中。

const {options} = require（'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上进行查看。希望这对您有所帮助?️?️

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

1 个答案: