儿童超敏c反应蛋白高:反应容器道具儿童通过(react container)

害怕这个问题很简单愚蠢,但我卡住了 (

我有一些嵌套的盒子组件:

<Box.Content anyProp="prop">
  <Box.Text...
  <Box.Links

如何将所有道具形式 Box.Content 传递给所有子容器(Box.Text,Box.Links,其他任何东西)?

没有运气的尝试:

BoxComponent.Content = (...props) => (
  <BoxContent {...props}>{props.children}</BoxContent>
);

然后尝试从子容器内的 Parent 捕获任何道具-没有列出道具(

0

您可以使用React.cloneElement动态设置父对象在其子对象上的道具。

运行以下代码段。Parent组件上的prop1prop2将传递给Child1Child2组件。

const Child1 = (props) => <p>Child 1: {JSON.stringify(props)}</p>;
const Child2 = (props) => <p>Child 2: {JSON.stringify(props)}</p>;
const Parent = ({ children, ...props }) => {
  children = children.map(v => React.cloneElement(v, props));
  return <div id="parent">{children}</div>;
};
const App = () => (
  <Parent prop1="foo" prop2="bar">
    <Child1 />
    <Child2 />
  </Parent>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="s://cdnjs.cloudflare/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="s://cdnjs.cloudflare/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="s://unpkg/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(714)
Book y:类型“Book”不可赋值为类型“Book”
上一篇
Dw网页设计成品代码:订单和交货 DW(dw warehouse)
下一篇

相关推荐

  • java 英语 A Comprehensive Guide to Learning the Language

    Java 英语是一种用于编写 Java 程序的英语语言。它允许开发人员使用类似英语的语法来描述 Java 程序,而不是使用 Java 代码。它可以帮助开发人员更快地开发 Java 应用程序,并且可以更容易地理解和维护 Java 代码。…

    2023-02-05 07:05:43
    0 41 27
  • python str 转json:How to Convert Python Strings to JSON

    Python str 转 json 可以使用 json 模块中的 loads 函数,代码如下:输出结果:…

    2023-08-12 14:31:13
    0 81 22
  • 泰剧小姑娘磕cp锤墙的表情包:使用加载锤需要 js(define hammer)

    关于泰剧小姑娘磕cp锤墙的表情包的问题,在define hammer中经常遇到,我的项目目前有 jquery.hammer 和 hammer.js。如何使用 requirejs 仅访问特定范围的 hammer.js?…

    2023-11-20 07:30:34
    0 71 34
  • C语言取随机数:多种语言中的随机数(numbers in different languages)

    关于C语言取随机数的问题,在numbers in different languages中经常遇到,我在尝试做一个游戏,两个玩家打一场,按屏幕上的一个按钮,对对方造成伤害,一个角色可以造成的伤害应该是 1 到 10 之间的一个随机数,被攻击的角色受到的伤害应该是同一个随机数。…

    2023-11-17 06:15:45
    0 89 60
  • 海伦钢琴cs6:Indesign CS6 Javascript

    关于海伦钢琴cs6的问题,在indesign change font color中经常遇到,我是 javascript 初学者。我正在使用 indesign CS6。我已经为整个文档中使用的所有字体分配了段落和字符样式。使用字符样式,我已经将某些类型的颜色更改为紫色。紫色文本正在用于引起对该文本的特别注意。但是我希望能够打开和关闭紫色文本。当我切换关闭紫色时,我希望文本能够更改为灰色。我确实需要它能够…

    2023-11-07 04:21:04
    0 86 27
  • javascript开发桌面应用从入门到精通

    JavaScript是一种跨平台的脚本语言,可以用来开发桌面应用。它可以在浏览器中运行,也可以在服务器端运行,甚至可以用来开发桌面应用。…

    2023-03-12 12:03:42
    0 54 60
  • javascript可以跨平台吗优势与挑战。

    答:是的,javascript可以跨平台。它可以在多种操作系统和浏览器上运行,如Windows、Mac OS、Linux和Chrome、Firefox等。下面是一个简单的javascript代码示例,用于显示“Hello World”:…

    2023-04-24 12:52:30
    0 14 75
  • react native 样式:```This is a Title```

    React Native 样式是 React Native 应用程序中最重要的部分,它提供了一种方便的方式来为应用程序添加外观和布局。…

    2023-01-30 15:39:38
    0 76 39

发表评论

登录 后才能评论

评论列表(37条)