Question

我无法根据select的类型动态呈现select的选项。有什么问题？

console.log显示messsage“true”但不收费HTML元素

/*Call to component*/
<SelectContainer type={1}/>

/*Component*/
import React from 'react';
const SelectContainer = ({type}) => {
let option = [];

if (type === 1) {
    option.push = (<option value="#">asdf</option>)
    console.log("true"+option);        
}else if (type === 2) {
    option.push = (<option value="#">1</option>);        
    option.push = (<option value="#">2</option>);
    option.push = (<option value="#">3</option>);
    console.log("false"+option);
}else{
    console.log('nooo')
}
return (
    <select className="selectContainer">
        {option}
    </select>
);
}

export default SelectContainer;

Answer 1

由于您的option变量是一个数组，因此您必须使用map将其映射出来。像这样：

{ option.map(item => item) }

您的.push操作也不正确。

应该是：option.push(<option value="#">1</option>);而不是=的作业。

Answer 2

让我们尝试更改您的代码：

/*Call to component*/
<SelectContainer type={1}/>

/*Component*/
import React from 'react';
const SelectContainer = ({type}) => {
let option = [];

if (type === 1) {
    option.push(<option value="#" key={0}>asdf</option>)
    console.log("true"+option);        
}else if (type === 2) {
    option.push(<option value="#" key={0}>1</option>);        
    option.push(<option value="#" key={1}>2</option>);
    option.push(<option value="#"key={2}>3</option>);
    console.log("false"+option);
}else{
    console.log('nooo')
}
return (
    <select className="selectContainer">
        {option.map((item) => {
           return item
        })}
    </select>
);
}

export default SelectContainer;

您必须将变量放到map()函数中，它将循环您的选项组件，并且不要忘记使用key。如果你没有设置它会显示警告，也许它可以帮助你：）

将父数据传递给子级

2 个答案: