Javascript 在变量中声明窗体时发生反应错误

我正在做一个反应。我刚刚创建了这个名为Input.jsx的组件

import React from "react";

const Input = (label, placeholder) => {
  return (
    <label htmlFor={label}>
      {label}
      <input type="text" placeholder={placeholder} />
    </label>
  );
};

export default Input;

从“React”导入React；
常量输入=（标签、占位符）=>{
返回(
{label}
);
};
导出默认输入；

我导入了它并在index.js中使用了它

import React from "react";
import ReactDOM from "react-dom";
import input from "./components/Input.jsx";

const App = () => {
  const InputDrop = input("label", "placeholder");
  return (
    <div>
      <InputDrop />
    </div>
  );
};

export default App;

ReactDOM.render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
从“/components/input.jsx”导入输入；
常量应用=（）=>{
常量InputDrop=输入（“标签”、“占位符”）；
返回(
);
};
导出默认应用程序；
ReactDOM.render(

但是，如果我不在var中声明表单，它就会工作，如下所示：

import React from "react";
import ReactDOM from "react-dom";
import input from "./components/Input.jsx";

const App = () => {
  return <div>{input("label", "placeholder")}</div>;
};

export default App;

ReactDOM.render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
从“/components/input.jsx”导入输入；
常量应用=（）=>{
返回{input（“标签”、“占位符”）}；
};
导出默认应用程序；
render（，document.getElementById（“根”））；

我不知道为什么不起作用。非常感谢所有类型的帮助或建议
您应该不要调用函数之类的组件。在编译过程中，babel会为您在内部通过该方法进行传输

React函数组件接受
props
作为其第一个参数，该参数是向组件传递属性的对象。使用ES6析构函数语法：

//注意用于分解结构的大括号{}
常量InputDrop=（{标签，占位符}）=>(
{label}
)


您应该传递道具，而不是直接将组件作为函数调用




但总的来说，这听起来并不意味着高人一等，至少你应该彻底阅读一下最基本的内容。幸运的是，这是最好的纪录片之一，所以很容易阅读和学习

您应该永远不要调用函数之类的组件。在编译过程中，babel会为您在内部通过该方法进行传输

React函数组件接受
props
作为其第一个参数，该参数是向组件传递属性的对象。使用ES6析构函数语法：

//注意用于分解结构的大括号{}
常量InputDrop=（{标签，占位符}）=>(
{label}
)


您应该传递道具，而不是直接将组件作为函数调用




但总的来说，这听起来并不意味着高人一等，至少你应该彻底阅读一下最基本的内容。幸运的是，这是最好的纪录片之一，所以很容易阅读和学习

您应该直接将其用作组件

import Input from "./components/Input.jsx";

const App = () => {
  return (
    <div>
      <Input label="label" placeholder="placeholder"/>
    </div>
  );
};

尽管在这种情况下，使用这种方法没有多大意义。
您应该直接将其作为组件使用

import Input from "./components/Input.jsx";

const App = () => {
  return (
    <div>
      <Input label="label" placeholder="placeholder"/>
    </div>
  );
};

尽管在这种情况下，使用这种方法没有多大意义。
试试下面的方法

输入组件
从“React”导入React；
常量输入=（{标签，占位符}）=>
{label}
导出默认输入；

index.js
从“React”导入React；
从“react dom”导入react dom；
从“/components/input.jsx”导入输入；
常量应用=（）=>
导出默认应用程序；
render（，document.getElementById（“根”））；
尝试以下方法

输入组件
从“React”导入React；
常量输入=（{标签，占位符}）=>
{label}
导出默认输入；

index.js
从“React”导入React；
从“react dom”导入react dom；
从“/components/input.jsx”导入输入；
常量应用=（）=>
导出默认应用程序；
render（，document.getElementById（“根”））；
Thnaks！！我不记得解构了！谢谢你的帮助：）Thnaks！！我不记得自己被打乱了！感谢您的帮助：）这不是
htmlFor
的目的。它应该引用它标记的元素的唯一HTML
id
（在本例中为
输入
）。虽然如果标签包装了输入，您可以忽略它。请看，这不是
htmlFor
的目的。它应该引用它标记的元素的唯一HTML
id
（在本例中为
输入
）。虽然如果标签包装了输入，您可以忽略它。看见
import React from "react";

const Input = ({label, placeholder}) => 
      <label htmlFor={label}>
      {label}
      <input type="text" placeholder={placeholder} />
    </label>

export default Input;

import React from "react";
import ReactDOM from "react-dom";
import input from "./components/Input.jsx";

const App = () => 
    <div>
      <Input label="label" placeholder="placeholder" />
    </div>

export default App;

ReactDOM.render(<App />, document.getElementById("root"));