我想创建一个灵活/动态可以使用 React.js 呈现的 JSX 表单格式。此格式必须包含嵌套组。一个组可以包含其他组以及问题。
var Group = React.createClass({
render: function(){
return (
<fieldset></fieldset>
);
}
});
var Text = React.createClass({
render: function() {
return (
<label>
<input type="text"/>
</label>
);
}
});
React.render(
<form>
<Group>
<Text/>
</Group>
<Text/>
</form>,
document.getElementById('container')
);
我想生产:
<form>
<fieldset>
<label>
<input type="text">
</label>
</fieldset>
<label>
<input type="text">
</label>
</form>
但是,那<fieldset>
元素未填充。输出只包含一个空的<fieldset>
.
我应该如何嵌套react.js组件,并仍然保持在根和嵌套级别重用问题和组组件的灵活性?
当您将 React 元素嵌套到 JSX 中的其他 React 元素中时,父元素会传递一个children
包含子元素的 prop。看儿童道具类型 http://facebook.github.io/react/tips/children-props-type.html.
另一种看待它的方式是<Group><div></div></Group>
JSX 相当于React.createElement(Group, null, React.createElement('div', null))
,这又相当于React.createElement(Group, {children: React.createElement('div', null)})
.
因此,在您的情况下,您的组组件将如下所示:
var Group = React.createClass({
render: function(){
return (
<fieldset>{this.props.children}</fieldset>
);
}
});
请注意,children 属性是一个不透明的数据结构(它可能是单个元素或元素数组,具体取决于输入),因此如果您需要操作它,您应该使用React.Children http://facebook.github.io/react/docs/top-level-api.html#react.children API.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)