将数据父项传递给子节点

Question

根据select的类型，我无法动态显示选择的选项。问题是什么？

的执行console.log放映讯息话题“真”，但不收费的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

让我们试着改变你这样的代码：

/*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。它会显示一个警告，如果你没有设置，也许它可以帮助你:)

Answer 2

由于您option变量是一个数组，你必须把它与map映射出。就像这样：

{ option.map(item => item) }

而且你.push操作是不正确的。

它应该是：option.push(<option value="#">1</option>);而不是转让=。