问题标签 [react-props]

我已经阅读了很多文章以找出 this.props.children 的实时用例，但我没有找到我正在寻找的答案。我知道 this.props.children 用于访问 b/w 数据组件的开始和结束标记。但我的问题是为什么我们不能向组件添加道具，而不是写入数据 b/w 开始和结束标记。例如：

有人可以用一个实时示例向我解释一下我们可以通过仅使用 this.props.children 来完成某个任务吗？

我有一个渲染多个实例的组件。每个元素都有一个打开模态的按钮。

请注意按钮内部的数据目标格式是“#varName”，在这种情况下，我从 {'#'+this.props.id} 获取 varName（这是一个长字符串，如..“5a1af3a7c7f04418b44d8c0b”）并使用相同的 id 作为按钮的名称，仅用于测试目的。

照原样运行代码将显示一个模糊屏幕，就好像数据目标和模态内的 id 不同但它们不一样。

当使用像 data-target="#test" 和 id="test" 这样的硬编码数据时，模式适用于所有实例，但模式仅显示第一个实例的信息。

我在这件事上真的很难过。:(

考虑我有一个转储组件，用于显示用户信息。有两种方法可以将用户信息传递给组件：

1):

2):

那么我应该使用哪种方式？我将以两种方式列出我所知道的一些优点和缺点：

1)

优点：

• 逻辑很容易理解，没有“神奇”的事情发生，组件显示你传入的任何内容。

• 可以通过浅比较状态和道具（ https://reactjs.org/docs/shallow-compare.html ）使用 PureComponent 的强大功能，以便组件仅在需要时重新渲染

缺点：

• 我必须输入许多参数传递，例如<UserItem userName={user.name} userEmail={user.email}>（除非您使用扩展运算符...user，但您将传递所有对象属性）

• 我不能在组件内使用对象方法。例如，我的 User 模型有一个方法user.totalMoneys()，因为我的对象中有一些惰性计算属性。

2)

优点：

• 通过看起来很简单：<UserItem user={user}>

• 可以在 UserItem 中使用对象方法

缺点：

• 我不能使用 PureComponent 的好处，我必须自己比较，

是否有可能获得jsx由组件包装的实际“原始”文本Parent（例如 from props.children）？

鉴于此组件：

问题：

在Parent.js，我可以用this.props.children（或其他任何东西）做任何事情来得到这个（理想情况下作为一个字符串）：

输出：

"<Child name={'test'} />"

I am a beginner in the react framework, so my question may appear basic to many of you. But believe me I've been stuck on this part. I am trying to get the text box value on button click and send the value to other function as a prop. I'm able to extract the value of textbox field but on the click event, i get an error 'Cannot read property 'props' of undefined'.

here are the important points:-

1. termchange() is used for extracting the input text value.
2. handleclick is used for extracting textbox value onclick event.
3. oncitychange is a function to which I've to send the value of textbox (oncitychange() function is inside different component).

Thank you in advance.

here's my code:-

我在组件之外有以下功能

我有一个返回以下功能的组件。

我想知道如何在<li>标记类名的值中访问 getSortByClass 函数的返回值。

这是完整的组件代码。

我在学校考试的一部分中处于最后一个规范。

select 应该有一个 onChange 事件来提交新的动物

本质上，我似乎无法将handleSubmit函数传递给孩子，以响应变化......这是规范的其余部分。

这是父组件Exhibit：

这是AnimalSelect(The child of Exhibit) 组件：

不幸的是，这是我得到的唯一错误。

有任何想法吗？

我有一个我想通过 React 输出的对象：

而我的反应组件（削减），是另一个组件

正如您从上面的代码片段中看到的那样，我正在尝试通过在 props 中使用数组 Answers 来插入组件 Answers 的数组，它会迭代但不会输出到 HTML 中。

我想向 DollarView 组件发送道具，但由于未知原因，它失败了。为了测试这个问题，我使用了一个 Alert 来显示 DollarView 组件的 DollarValue 属性（我在 DollarView 组件中使用了这行代码：）Alert.alert(this.props.dollarValue.toString());，但是在应用程序刷新时，整个应用程序停止并且我收到此错误：

TypeError: undefined is not an object (evaluating '_this.props.dollarValue.toString')

这是我的代码：

和 DollarView 组件：

DollarCalculator 组件也会发生同样的事情。

我正在尝试在事件处理程序中使用道具。这是我的代码的一部分

问题是我无法访问this.props“移动”处理程序内部。