Javascript 从孩子那里得到道具—；默认值

编辑：代码笔链接

我正在（ab）使用JSX为我的一些非技术同事制作一个表单构建“DSL”。有一个

SingleChoice

组件可以这样使用：

<SingleChoice>
  <Option value="A">
    // ... what to show when A is chosen
  </Option>
  <Option value="B">
    // ... what to show when B is chosen
  </Option>
</SingleChoice>

function Option({label, value, children}) { return <></> }

是的，我可以将它们作为对象数组

{value:string，show:ReactNode}

传递，但对于我的非开发人员同事来说，这不是一种友好的语法

现在，我来回答这个问题。在父级中，我遍历其所有子级并根据其值呈现输入：

...
{children.map(ch => <> <input ... /> {ch.props.value} </>)}
...

我也是

<SingleChoice>
  <Yes />
</SingleChoice>

标签为空，好像没有看到默认的属性值。为什么会这样？是虫子吗？我如何正确地实现这一点？请记住，我并不想向编写表单的用户公开任何实现细节（因此没有显式回调传递）

---

我能想到的唯一“正确”的方法是在父对象中创建一个回调上下文，所有子对象都会查找并使用它们的值进行调用。问题是，会有很多上下文以这种方式生成和更新，我担心会影响性能。

我对您希望发生的事情有点困惑。据我所知，从Codepen上的代码中可以看出，在调用时从未定义过默认的prop值

<Yes/>

---

如果不向其传递道具，它不会由父组件渲染。另外，react函数应该只接受props作为参数，您不需要定义值和子项。

我在另一个答案中回答，以获得格式

• 出现的第一个错误是在代码开头运行ReactDOM.render。您应该在代码末尾添加它，否则将不使用默认值（我不知道为什么会这样）
• 第二个问题是，你的函数并没有真正做出反应。在react函数中，取一个参数props。您可以引用value或children作为props.value或props.children

不反应：

函数Yes（{value=“Yes1”，children}）{return}

反应：

函数Yes（props）{return？+{props.value}}

• 第三个是通过react中的defaultProps命令声明defaultProps。因此，与其将参数设置为值（因为同样，没有参数），不如编写：

Yes.defaultProps={value:“Yes1”}

• 最后，您的函数singleChoice也不是真正的react。确实有一种更干净的方法来重构代码，然后滚动yes组件并检查它们的值。然而，你可以做你想做的事。如果您解决了其他问题，它应该按照您的预期工作

---

你能在fiddle或stackblitz链接中共享代码吗？@Mahdizoraghi Done:。没错，我完全忘记了代码笔中的重要部分（即在

Yes

中设置默认值）。现在请查看更新版本。我发现了一些问题，我将在另一个答案中添加这些问题。bc评论功能有限OK，第一个和最后一个我将尝试，但不是

function Yes（{value=“Yes1”，children}）

只是一个带有一个参数的函数，它只是在定义站点上解包的？i、 e.“真的反应”，正如你所说的？好吧，现在，当我使用

defaultProps

时，它确实起作用了，但我已经读到，默认的道具已经被弃用了，以后会被删除——默认参数（就像我在这里使用的）是一种方法。无状态的反应函数应该只将道具作为参数。直接取自官方react文档-'此函数是一个有效的react组件，因为它接受一个带有数据的“props”（代表属性）对象参数，并返回react元素。'我不知道在忽略react功能的情况下，为什么选择在该项目中使用react。另外，twitter帖子只是一个摆脱默认道具的建议。除非我遗漏了什么，否则我的函数只接受一个道具参数。有关详细信息，请参阅。

<Yes/>