Reactjs-使用javascript在下拉列表中填充数组元素

Question

我试图用给定数组"options"中的数据填充下拉列表，但遇到了一个错误，它无法读取null的属性appendChild。

如果我使用"document.getElementByClassName"而不是document.getElement ById表示"select"，我会遇到一个错误，其中"select.appendChild不是函数">

在codepen上工作，但在我的react函数中不工作。https://codepen.io/michaellee212/pen/LYpGgrm

我不明白为什么会出现这个问题

代码：

export default function ComposeEmailForm({ handleCompose, template_titles }) {
var options = ['1', '2', '3', '4', '5'];
var select = document.getElementById('template-select');
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement('option');
el.text = opt;
el.value = opt;
console.log(el);
select.appendChild(el);
}
return (
<select id='template-select'>
<option>----</option>
</select>
)

Answer 1

React和JSX的美妙之处在于您不必像这样进行DOM操作。事实上，你不应该做这样的事情。相反，您可以使用选项数组在JSX中创建<option>，如下所示：

export default function ComposeEmailForm({ handleCompose, template_titles }) {
const options = ['1', '2', '3', '4', '5'];
return (
<select id='template-select'>
<option>----</option>
{options.map(option => <option key={option} value={option}>{option}</option>)}
</select>
);
}

如果这有帮助，请告诉我。

Answer 2

返回的select标记不是真正的dom元素，它在react中经过一些处理后会变成真正的dom元件，然后你可以使用document.getElementByClassName ('template-select')来找到它。对于你遇到的错误，你可以这样修复它。

import React,{useEffect} from 'react'
export default function ComposeEmailForm({ handleCompose, template_titles }) {
useEffect(()=>{
var options = ['1', '2', '3', '4', '5'];
var select = document.getElementByClassName('template-select');
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement('option');
el.text = opt;
el.value = opt;
console.log(el);
select.appendChild(el);
}
},[])
return (
<select id='template-select'>
<option>----</option>
</select>
)

UseEffect在这里使用，它将在select变成true dom元素后运行。

您可以了解react的生命周期以及react钩子的一些知识。

componentDidMount((方法在组件输出呈现到DOM后运行。--https://reactjs.org/docs/state-and-lifecycle.html

如果你熟悉React类的生命周期方法，你可以of useEffect Hook作为componentDidMount、componentDidUpdate和组件WillUnmount组合。--https://reactjs.org/docs/hooks-effect.html