ReactJS 从导入的元素创建元素

Question

有没有一种方法可以对导入的元素使用“document.createElement()”函数？

示例：

import Box from "./Box"; // import my component

function createFunction(){
    const boxContainer = document.getElementById("boxContainer");
    const createdBox = document.createElement(<Box />); // trying to take my component and creating though a function that I call with a button, but obviously doesn't work

    boxContainer.appendChild(createdBox);
}

我现在的代码：

import Box from "./Box";

function createFunction(){
    const boxContainer = document.getElementById("boxContainer");

    const createdBox = document.createElement("div");
    createdBox.classList.add("box");

    boxContainer.appendChild(createdBox);
}

我想从一个按钮创建一个我导入的元素的副本，而不是回忆所有的东西，比如里面的

或添加 calsses 等。

Answer 1

如评论中所述，您无需使用原生 JS 方式来控制 DOM。相反，您的 Box 组件负责渲染内容。您可以通过返回一些代表您要渲染的内容的 JSX 来实现 DOM.

我在下面添加了您的两个问题的答案。希望对您有所帮助。

问题一：如何在React中导入和使用组件

一个简单的 Box 组件可能如下所示：

const Box = () => {
  return (
    <div className='box'>Box</div>;
  );
};

export default Box;

然后，将您的 Box 组件导入到您需要它的另一个组件，并在该组件内渲染它，如下所示：

import Box from './Box';

const App = () => {

  return (
    <div className='app'>
      <Box />
    </div>
  );
};

export default App;

问题 2：执行更新以将新项目添加到列表（在 React 中使用 State 和 Props 与组件）

您所描述内容的一个有用示例是通过 state and props 以及对 React 中处理事件和生命周期的理解完成的。

描述每个待办事项需要哪些数据？这将确定列表中每个待办事项的数据形状。

哪个组件应该管理待办事项列表？此组件会将待办事项保留在 state.

中

其他组件是否需要访问此数据？这些组件可以接收从父组件传来的 props 数据。

下面的示例假设您有一个 Box 组件，负责显示列表中的每个待办事项。希望这说明了管理数据流以及如何将新项目添加到列表并显示它们。

对象 destructuring and spread syntax 在示例中分别用作解压 props 和向状态添加其他项目的便捷方式。

import { useState } from 'react';

const Box = ({ title, description }) => {
  return (
    <div className='todo'>
      <h4>{title}</h4>
      <p>{description}</p>
    </div>
  );
};

const App = () => {
  const defaultFormFields = {
    title: '',
    description: '',
  };

  const [todos, setTodos] = useState([]);
  const [formFields, setFormFields] = useState(defaultFormFields);

  const { title, description } = formFields;

  const addTodo = (event) => {
    event.preventDefault();
    const newTodo = {
      title,
      description,
    };

    setTodos([...todos, newTodo]);
    clearFormFields();
  };

  const clearFormFields = () => {
    setFormFields(defaultFormFields);
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormFields(() => {
      return {
        ...formFields,
        [name]: value,
      };
    });
  };

  return (
    <div>
      <h2>Add Todo</h2>
      <form onSubmit={addTodo}>
        <label>Title</label>
        <input
          onChange={handleChange}
          name='title'
          value={title}
        ></input>
        <label>Description</label>
        <input
          onChange={handleChange}
          name='description'
          value={description}
        ></input>
        <button type='submit'>Add Todo</button>
      </form>
      <h2>Todos</h2>
      {todos.map(({ title, description }) => (
        <Box key={title} title={title} description={description} />
      ))}
    </div>
  );
};

export default App;

ReactJS 从导入的元素创建元素

ReactJS create element from an imported element

html

javascript

css

reactjs

script