问题标签 [react-props]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
9 回答
120605 浏览

javascript - 在 React JSX 中访问引号内的道具

在 JSX 中,如何props从带引号的属性值中引用一个值?

例如:

生成的 HTML 输出为:

0 投票
4 回答
1042 浏览

reactjs - 如果没有 shouldComponentUpdate,React 0.14 的无状态组件将如何提供性能改进?

自从我阅读 React 0.14 的发行说明(和其他相关炒作)以来,这个问题一直在我脑海中转来转去——我是 React 的忠实粉丝,我认为无状态组件(https://facebook.github。 io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components)是一个很好的主意,无论是为了便于编写此类组件,还是为了在代码中表达这些组件的意图对于相同的道具数据,组件应该是“纯”的。

问题是:React 怎么可能优化这些无状态的组件功能,而无需全力以赴并假设 props 引用不仅是不可变的,因为它们不应该在组件内被操纵,而且它们永远不会改变在组件生命周期之外?“常规”组件(也称为有状态组件——换句话说,贯穿整个生命周期的组件;componentWillMount、getInitialState 等)具有可选的“shouldComponentUpdate”函数的原因是 React没有假设所有的 props 和 state 引用都是完全不可变的。渲染组件后,props 引用的某些属性可能会发生变化,因此相同的“props”实例稍后可能具有不同的内容。这就是为什么人们对使用完全不可变的结构有很多兴奋的部分原因,以及为什么有人说将 Om 与 React 结合使用可以提供巨大的性能提升;因为那里使用的不可变结构保证了任何对象的任何给定实例永远不会被改变,所以 shouldComponentUpdate 可以对 props 和 state 执行非常便宜的引用相等检查(http://swannodette.github.io/2013/12/17/the -future-of-javascript-mvcs/)。

我一直在尝试找到有关此的更多信息,但一无所获。如果不假设 props 数据将由不可变类型组成,我无法想象围绕无状态组件可以做出哪些性能改进也许对非不可变 props 类型进行一些初步分析,以尝试猜测“props”和“nextProps”是否代表相同的数据?

我只是想知道是否有人对此有任何内幕消息或其他一些启发性的见解。如果 React确实开始要求 props 类型是“完全不可变的”(允许引用相等比较以确认数据没有改变),那么我认为这将是一个很大的进步,但它也可能是一个很大的变化。

0 投票
4 回答
909 浏览

reactjs - React 中的“Prop”到底是什么?

我刚开始在 iOS 上使用 React Native 看看感觉如何,我有一个愚蠢的问题。我看到每个人都在谈论“Props”,每当我阅读文章或教程时,作者都会大量使用这个术语,它是在代码中相同。例如,在类声明中,我经常看到如下构造函数:

我找不到关于什么是道具的明确解释,有人能告诉我吗?

0 投票
5 回答
62664 浏览

javascript - 功能性无状态组件中的 PropTypes

在不使用类的情况下,如何在反应的功能性无状态组件中使用 PropTypes?

0 投票
2 回答
35760 浏览

javascript - 反应 propTypes 组件类?

如何验证提供的道具是组件类(而不是实例)?

例如

0 投票
1 回答
440 浏览

reactjs - React/Meteor - 来自 props 的 this.state 未定义

我需要将道具传递给我的初始状态以进行编辑表单(因为我希望表单的值等于状态)但我似乎无法让它工作。该组件没有将道具提供给initialState,因为它首先加载一个空道具,我认为是由于createContainer。我尝试了很多东西(componentDidMount、WillMount、WillReceiveProps...),但没有成功。代码如下,有什么帮助吗?

我还尝试将道具作为 defaultValue 传递并将状态保持为值,但它不允许在表单上同时具有这两者。知道如何解决我的问题吗?提前致谢。

0 投票
1 回答
2604 浏览

reactjs - 在 React 中传递同名函数

我可以props用传播运算符传递。IE,

等于:

我们可以在同名的组件定义中使用它。

我的问题是如何传递这样的函数?下面的等效代码是什么?

编辑:

handleClick上面的行将把函数传递anotherHandleClick给孩子。有没有这样的东西<Component {...Fns} />,每个函数都会作为同名的道具传递下去。

0 投票
5 回答
3137 浏览

javascript - React 传递新的 props

所以我在一个组件中更新了我的状态,然后将新的道具传递给孩子,但孩子没有正确更新,输入的 defaultValue 没有改变。起初我认为这可能是因为我正在使用 this.props 所以开始使用 this.states 并首先在那里应用新的道具,但似乎没有用。

父组件

子组件:

解决方案代码:

待办的...

0 投票
0 回答
79 浏览

javascript - React 开发工具 setInProps

我一直在查看 React Dev Tools 的GitHub 存储库,并将他们的一些代码用于我自己的项目。我无法理解方法path中应该包含的内容setInProps

它似乎是某种类型的数组。它被传递给copyWithSet(...)

然后copyWithSetImpl(...)

有人可以提供一个示例,说明我如何使用它setInProps来更新道具中的某些内容吗?我已经有了内部实例对象,并假设这value只是道具值。

0 投票
1 回答
45 浏览

reactjs - 在 React 子组件中异步检索状态存在问题

我有一个非常有趣的问题,从我的 React 应用程序的状态中检索和显示信息,只有一个嵌套的孩子。

我正在尝试做的类似于这个react-router tutorial for recursive paths。我有一个管理员路由,它将用户带到用户可以编辑的嵌套部分。我成功地将道具传递给每个组件,呈现应用程序状态中保存的信息,直到达到某个点。

我的网址是:/admin/label/posts/edit/:post

我的组件如下所示:

我的错误是:

但是,当我console.log(post)应用程序抛出 5 个日志时,前 2 个是undefined,接下来的 3 个包含我正在寻找的正确信息。我的想法是,在呈现组件的 html 之前,我需要等到信息可用。然而,当我将日志放入其他组件时,我注意到了同样的行为。多个日志,前一个或两个是undefined,其余的包含所需的信息,然后所有组件都正确加载。

我无法理解的是为什么我在使用这个特定组件时遇到问题。我知道我需要的信息正在通过,但由于某种原因,我无法像往常一样使用它。

我已经用谷歌搜索了我的手指,尝试导入有用的库,尝试使用承诺,尝试在此处询问之前实现我所能做的一切。

任何帮助或建议表示赞赏!我希望这一切对某人有意义。