防止在样式化组件中将道具从子级传递到父级
我正在使用样式组件库与TypeScript。当创建从react组件A继承样式化组件B时，我遇到了问题。A是node_module（我无法更改A的行为）。但是A将所有道具传递给div。
如果b具有a没有的任何属性，则控制台中会显示警告消息，因为div没有isexpanded属性：
警告：React无法识别DOM元素上的isexpanded属性。如果您有意希望它作为自定义属性出现在DOM中，请将其拼成小写isexpanded。如果您不小心从父组件传递了它，请将它从DOM元素中移除。
interface AProps {
}
interface BProps {
isExpanded: boolean
}
const A = (props: AProps) => (
<div {...props} />
) // Component A pass all props to <div>
const B = Styled(A)<BProps>`
` // I need isExpaned prop in component B and I would like to interit from A
在样式化组件中，有什么方法可以防止“泡泡”道具从子级到父级？
共有1个答案
样式化组件中没有内置的解决方案，但您可以将其包装到函数组件中，并对不需要的属性进行结构化。
const B = Styled(({isExpanded, ...props})=><A {...props}/>)<BProps>`
您还可以查看关于这个主题的github-issue：https://gitHub.com/styled-components/styled-components/issues/135
-
问题内容： 我有两个组成部分： 第一个是父组件，它是通常的React组件。 第二个是孩子，它是功能组件。 我想将 Titles 的值（处于子状态）传递给父Component。这是我的 子组件 代码： 这是我的 父组件 ： 这看起来很容易，但这是我第一次使用功能组件。你能帮我吗 ？ 问题答案： React就是关于在组件树中向下流动的数据。如果您希望能够显示和/或修改彼此之间的共享状态，则应提升状态并
-
问题内容： 在我正在从事的新项目中，我开始使用组件而不是指令。 但是，我遇到一个无法找到具体标准方法的问题。 从孩子向父母通知事件很容易，您可以在下面的我的plunkr上找到它，但是从父母向孩子通知事件的正确方法是什么？ Angular2似乎通过使用以下方法解决了此问题：https ://angular.io/docs/ts/latest/cookbook/component-communicat
-
也许有一种方法可以将组件绑定到事件？ 在使用React一年多后，在Sebastien Lorber的回答的激励下，我得出结论，将子组件作为参数传递给父母中的函数实际上不是React的方式，也不是一个好主意。我换了答案。
-
我使用的反应与反应路由器的项目，我需要传递道具的子组件从路由。 我有这样的设置： App.js Home.js 问题是主组件总是给出错误“未定义”。我无法理解如何解决这个问题。如果我从Home.js中移除道具，组件渲染就很好。但当我尝试访问道具时，会出现错误。
-
问题内容： 在组件中，我需要将函数的返回值传递给属性。然后从属性需要被传递到的组件。新来的反应。不确定如何将属性从子级传递到组件。 问题答案： 您可以将函数从父级传递给子级，子级可以使用颜色调用该函数（很多操作都类似于事件处理程序）。在App中收到颜色后，使用.setState（）将其分配给状态值，然后将其在render（）中获取
-
问题内容： 我只是在 文档中读到以下错误，它将影响渲染时间。如果是这种情况，我该如何重构代码并使用所需的道具来创建动态样式？ 先感谢您。 标签组件 问题答案： 我相信文档在说的是您应该避免在渲染组件中包含样式： 做这个 代替这个 因为发生的是组件的Props更改，所以组件将重新渲染并且样式将重新生成。因此，有必要将其分开。 因此，如果您进一步阅读 基于道具 的 适应 部分，他们将对此进行解释： 之