从反应函数返回 HTML答案

【问题标题】：Return HTML from react function从反应函数返回 HTML
【发布时间】：2020-04-08 23:13:54
【问题描述】：

我是 reactJs 的新手我想从函数中返回 HTML 代码

changeValue= (e) =>{
    if(e.target.value=="Albania"){
        return(
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        )
    }
}

render (){

        return(

               <select onChange= {this.changeValue}>
                   {country}
               </select>


        )
    }
}

当我将选择选项更改为阿尔巴尼亚时，选项 1,2 不显示

谢谢。

【问题讨论】：

我认为你需要先学习html。您需要在开始时渲染选项
我的意思是当我更改值时，事件 changeValue 应该起作用并返回选择，但它没有显示选择我不知道为什么
我的意思是你需要先渲染选项。所以用户可以在屏幕上选择一些东西。让我发布一个答案
是的，我有一个包含所有国家/地区名称的选择选项，如果函数显示选项 1,2，我将事件 onChange 选择值更改为阿尔巴尼亚
嗯好的，你需要澄清你在这里要实现的目标吗？

标签： javascript reactjs jsx

【解决方案1】：

您可以将其设置为一个变量，然后将其呈现为 {country} 如下所示；

const selectOption1_2 =null;
changeValue= (e) =>{
    if(e.target.value=="Albania"){
        selectOption1_2 = (
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        )
    }
    else
        selectOption1_2 = null;

}

render (){

        return(

               <select onChange= {this.changeValue}>
                   {country}
               </select>
               {selectOption1_2}


        )
    }
}

最好将selectOption1_2 置于状态。

【讨论】：

我想在用户在屏幕中而不是在控制台中选择阿尔巴尼亚后显示选项 1,2
这不起作用，因为组件不会重新渲染。您应该将 selectOption1_2 存储在状态中
@AdamJeliński 这就是我在回答末尾的建议。但我无法添加状态，因为 OP 没有共享整个组件。感谢您的反对

【解决方案2】：

您可以为此使用 State。

constructor() {
    this.state = {options: countries};  
}

changeValue = (e) => {
    e.persist();
    if(e.target.value=="Albania"){
        this.setState({options: <><option>1</option><option>2</option></>});
    }
}

render () {
    return (
         <select onChange= {this.changeValue}>
             {this.state.options}
         </select>
    )
}

【讨论】：