- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
向 react 专家提出一个简短的问题;)
React.Children.only 是它的顶级 api 之一,react-redux ( <Provider />
) 和 React Router ( <Router />
) 非常常用来注入(inject) store/router 作为上下文,这背后的原因是什么,为什么不简单地使用 return props.children
呢?似乎与 JSX 有关?
编辑:请不要解释什么是什么React.Children.only,我问的是为什么使用它而不是 props.children,后者看起来更强大/灵活。
最佳答案
正如 docs 中指出的那样
Verifies that children has only one child (a React element) and returns it. Otherwise this method throws an error.
那么现在为什么它比仅使用 props.children
更有帮助?
主要原因是它抛出了一个错误,从而停止了整个开发流程,所以你不能跳过它。
这是一个方便的实用程序,它强制执行专门且仅一个子级的规则。
当然,您可以使用 propTypes
,但这只会在控制台中发出警告,您可能会错过该警告。
React.Children.only 的一个用例可以是强制执行应由一个逻辑子组件组成的特定声明性接口(interface):
class GraphEditorEditor extends React.Component {
componentDidMount() {
this.props.editor.makeEditable();
// and all other editor specific logic
}
render() {
return null;
}
}
class GraphEditorPreview extends React.Component {
componentDidMount() {
this.props.editor.makePreviewable();
// and all other preview specific logic
}
render() {
return null;
}
}
class GraphEditor extends React.Component {
static Editor = GraphEditorEditor;
static Preview = GraphEditorPreview;
wrapperRef = React.createRef();
state = {
editorInitialized: false
}
componentDidMount() {
// instantiate base graph to work with in logical children components
this.editor = SomeService.createEditorInstance(this.props.config);
this.editor.insertSelfInto(this.wrapperRef.current);
this.setState({ editorInitialized: true });
}
render() {
return (
<div ref={this.wrapperRef}>
{this.editorInitialized ?
React.Children.only(
React.cloneElement(
this.props.children,
{ editor: this.editor }
)
) : null
}
</div>
);
}
}
可以这样使用:
class ParentContainer extends React.Component {
render() {
return (
<GraphEditor config={{some: "config"}}>
<GraphEditor.Editor> //<-- EDITOR mode
</GraphEditor>
)
}
}
// OR
class ParentContainer extends React.Component {
render() {
return (
<GraphEditor config={{some: "config"}}>
<GraphEditor.Preview> //<-- Preview mode
</GraphEditor>
)
}
}
希望这对您有所帮助。
关于reactjs - 为什么选择 React.Children.only?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48837831/
假设我想在存储在变量中的特定表中导航。 我想在表的 thead 中找到 tr 中的所有输入。 如果我有表的 ID,我会这样做 - $('#mytable thead tr input') 但是假设我已
我是 React 新手,我正在尝试了解一般语法的工作原理,但不确定在这里提问是否合适。以下是我的一个简单标题组件的代码。 export default class Title extends Comp
我正在尝试实现在树结构中获取 child 的 child 的可能性。 这是我想要的例子。 到目前为止我做了什么。 class Children(list): def __init__(self
我一直在尝试让它工作一段时间,但不确定如何执行以下操作。我的表单组件有包含常规 html 标记和输入的子组件。如果 child 是输入,我想添加 attachToForm 和 detachFromFo
在本文档中 https://flutter.dev/docs/development/ui/layout#nesting-rows-and-columns 他们使用 children : 但是在 An
即使我只向表中添加一项内容,我似乎也无法弄清楚为什么会显示重复的子项添加错误。 有 3 个主要类: WindowTease:加载舞台并调用 loadTable() 方法 InventoryContro
我一直在查看以前提出的问题,但似乎找不到适合我的情况的解决方案... 我希望能够循环遍历所有 child 和 child 的 child 等等...... 设计中的标记看起来与此类似
这个问题在这里已经有了答案: How can I use jQuery methods on elements accessed by brackets notation? (2 个答案) 关闭 5
我有一个场景,我知道我正在寻找的 div 恰好是两层深。 使用效率是否更高: $('#mydiv').find('.myselector') 或 $('#mydiv').children().chil
我今天有一个很奇怪的问题:我有一个水平显示一些缩略图的 RecyclerView,我使用 smoothScrollToPosition 导航到我需要的项目,但我注意到一个问题:它不会滚动到最后一项。进
只有 JS,没有 Jquery。 如何获取容器的所有子节点,然后为每个子节点获取子节点? 我不想将 ID 添加到作为网格行子级的每个包装器,我尝试使用“this”或此索引进行定位。该脚本应该是动态的,
任务:在“注释”类的任何段落内的有序列表中强调强调的文本。这是我目前所拥有的... .note>p>ol>em{text-decoration:underline;} 我正在努力让它继续下去。我的代码
我有两个类如下: --- CSS: .shw-intro { width: 250px; height: 150px; background: rgb(95, 190, 0);
当前的 Firebase 数据库结构: 我要实现的目标: 在我所有位置的任何“促销”子项中搜索等于某物的优惠券。 如果找到,将其“limit”参数减少 -1 来更新它 我当前的代码: mDat
我有一个 html 表,想要获取所有行。但是,在 DebugElement 或 NativeElement 上调用 .children 会返回不同的顺序。 我的 table : 1
我在使用 Element.children 时注意到一个奇怪的问题并且似乎没有找到好的解决方法。 示例 1(预期行为) 拿这个 HTML: 还有这个 JS const formElem
目标是选择任何后代 - 无论直系后代指示如何 - 但不选择他们的 child 。换句话说,如果我从文档中搜索,我希望找到目标选择器未包含的所有子元素: test t
当我尝试执行 ParentNode.children 时,显示无法读取未定义的属性“children”。尝试让父节点的所有子节点的背景颜色为粉红色。 现在,我有一个以半小时为增量的表格,根据上午 8
我不确定这是否可行,但这是我想在 Reactjs 中实现的目标: 所以我想做的是,我想使用 React.cloneElement API 将 Comp1 组件的 pro
更新:我在另一台安装更干净的机器上试过这个。我无法在那台机器上重现这个。如果我发现是什么有问题的 (VSStudio) 组件导致了这种情况,我会告诉你的。 我从后面的代码创建了一些 UIElement
我是一名优秀的程序员,十分优秀!