我現在有一個小程式，它使用 vanilla JS 構建一個 TODO 表。
是否可以將 React 組件按鈕添加到這些 TODO 之一？專門嘗試更新按鈕，但 React 不喜歡您手動操作 DOM ......所以這甚至可行嗎？我認為可以將 React 與其他代碼一起使用。我在他們的檔案中看到了諸如此類的靜態示例，但沒有像這樣的動態示例。
例如
document.addEventListener('DOMContentLoaded', function () {
fetch('/getTodos')
.then(response => response.json())
.then(data => {
console.log(data)
loadTodos(data)
})
})
function loadTodos(data) {
const table = document.getElementById("todos-list")
if (data.length === 0) { return table.innerHTML = "<tr><td>Nothing to do!</td></tr>" }
let content = ""
data.forEach( ({id,todo,dueDate}) => {
content = `<tr><td>${todo}</td></tr>`
content = `<tr><td>${new Date(dueDate).toLocaleString()}</td></tr>`
content = `<tr><td><button data-id=${id} onclick='deleteMe(${id})'>Delete</button></td></tr>`
})
table.innerHTML = content
}
uj5u.com熱心網友回復：
您可以輕松地將 React 組件動態插入到現有容器中：
setTimeout(() => {
// simulating async api call
const table = document.getElementById("todos-list");
table.innerHTML = `
<tbody>
<tr><td ></td><td>another td</td></tr>
<tr><td>another row</td></tr>
</tbody>
`;
ReactDOM.render(<App />, document.querySelector('.target'));
}, 500);
const App = () => {
return <span><button>Dynamic Component</button></span>;
};<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<table id='todos-list'></div>但是除了填充容器之外，沒有明智的方法將現有元素轉換為 React 元素。你<button data-id=${id} onclick='deleteMe(${id})'>Delete</button>不能變成一個組件（盡管有一些丑陋的代碼，你可以有一個單獨的 React 組件，向它添加一個點擊監聽器......但不要這樣做）。在 React 中，您應該始終從一個或幾個容器開始，然后將應用程式的組件插入其中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478298.html
標籤：javascript html 反应