Reactjs 如何在组件之间发送道具和方法？

嗨，伙计们，我正在尝试编写一个小应用程序。我是实习程序员。我需要帮助了解如何在我的应用程序上使用道具。我目前正在使用CodePen的一个组件，并从jsonplaceholder获取数据。但是我不知道如何在这个组件和App.js之间传递道具。简单的组件没有问题，但这里有很多方法和事件。有了这个标记的输入，我想添加或删除项目

import React from "react";

import StateFullComponent from "./components/StateFullComponent";
import StatelessComponent from "./components/StatelessComponent";
import TagInput from "./components/TagInput";

function App() {
  return (
    <div>
      <StatelessComponent
        props1={"String"}
        props2={1}
        props3={true}
        props4={JSON.stringify({ value: "value", key: 1 })}
      />
      <StateFullComponent items={["apple", "orrange", "pear", "male"]} />
      <TagInput />
    </div>
  );
}

export default App;

从“React”导入React；
从“/components/StateFullComponent”导入StateFullComponent；
从“/components/StatelessComponent”导入无状态组件；
从“/components/TagInput”导入TagInput；
函数App（）{
返回(
);
}
导出默认应用程序；

import React，{Component}来自“React”；
导出默认类TagInput扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：[]，
重点：错，
输入：“”
};
this.handleInputChange=this.handleInputChange.bind（this）；
this.handleInputKeyDown=this.handleInputKeyDown.bind（this）；
this.handleremovietem=this.handleremovietem.bind（this）；
}
componentDidMount（）{
取回（“https://jsonplaceholder.typicode.com/users")
。然后（响应=>{
返回response.json（）；
})
。然后（结果=>{
这是我的国家({
用户：结果
});
});
}
添加（）{
设值=Math.floor（Math.random（）*10+1）；
让users=this.state.users；
用户。推送（值）；
this.setState（{users:users}）；
}
handleInputChange（evt）{
this.setState（{input:evt.target.value}）；
}
handleInputKeyDown（evt）{
如果（evt.keyCode===13）{
const{value}=evt.target；
this.setState（state=>({
用户：[…state.users，value]，
输入：“”
}));
}
如果(
this.state.users.length&&
evt.keyCode==8&&
！this.state.input.length
) {
this.setState（state=>({
用户：state.users.slice（0，state.users.length-1）
}));
}
}
handleremovietem（索引）{
return（）=>{
this.setState（state=>({
用户：state.users.filter（（用户，i）=>i！==index）
}));
};
}
render（）{
log（this.props，“：：：：”；
const{users}=this.state；
const userId=users.map（（user，id）=>
{user.name}
）；
常量样式={
容器：{
边框：“1px实心#ddd”，
填充：“5px”，
边界半径：“5px”
},
项目：{
显示：“内联块”，
填充：“2px”，
边框：“1px纯蓝”，
fontFamily：“Helvetica，无衬线”，
边界半径：“5px”，
marginRight：“5px”，
光标：“指针”
},
输入：{
大纲：“无”，
边界：“无”，
字体大小：“14px”，
fontFamily：“Helvetica，无衬线”
}
};
返回(
/*  
{userId}
添加
*/

{this.state.users.map（（user，i）=>(

{user}
（十）

))}

);
}
}

在您的

组件didmount

中，您正在获取数据，并获取一个对象数组，并将状态值

users

设置为对象数组。这一切都很好，也正是你应该做的

在用户数组中循环时，

render

方法存在问题。请记住，数组中的每个

用户都是一个对象。查看
li
元素中的jsx。您正在呈现
用户
对象，而对象是无效的子对象。相反，您需要渲染对象中的特定字段

例如，如果对象包含
名称
字段和
电子邮件
字段，则呈现
{user.name}
或
{user.email}
。这样，您就可以呈现来自用户对象的特定数据字段

<li
  key={i}
  style={styles.users}
  onClick={this.handleRemoveItem(i).bind(this)}
>
    Name: {user.name}
    Email: {user.email}
    Id: {user.id}
    <span>(x)</span>
</li>


名称：{user.Name}
电子邮件：{user.Email}
Id:{user.Id}
（十）


似乎您在向组件传递道具方面仍然存在一些问题。这只解决了您看到的特定错误。如果您还有问题，请告诉我。
请澄清您的目标。您是否希望
App
组件管理作为道具传递给
TagInput
组件的数据？您是否希望
TagInput
组件在添加/删除数据时更新
App
组件？或者别的什么？您得到的这个特定错误是因为您试图呈现一个用户对象。React不知道如何渲染这些对象，因此会抛出错误。尝试将
{user}
更改为类似
{user.name}
（在
渲染
函数中）。我希望应用程序组件管理作为道具传递给TagInput组件的数据。但也许o需要两种方式。如果你想让应用程序管理数据，它必须是一个基于类的组件来保存状态对象。然后将componentDidMount方法从TagInput移动到App，并将获取的数据作为道具（或道具集）传递给TagInput。如果您希望TagInput能够与应用程序组件通信，可以在应用程序中定义一个函数，接收事件/数据并将其作为道具传递给TagInput。TagInput可以在通信需要返回到应用程序时调用作为道具传递的函数。如果这回答了您的问题，请将其标记为正确。
<li
  key={i}
  style={styles.users}
  onClick={this.handleRemoveItem(i).bind(this)}
>
    Name: {user.name}
    Email: {user.email}
    Id: {user.id}
    <span>(x)</span>
</li>