将数据父级传递给子级

Question

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

console.log 显示消息“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

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

/*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>);，而不是用=赋值。