Question

<div className="header">
   <Card>
      <div className="logo">
          <Logo />
      </div>
      <div className="timer">
          <Timer />
      </div>
   </Card>
</div>

我想实现这样的目标。我已经创建了一个组件卡，现在我希望这个组件应该包含任何随机的JSX以及其他组件。

我已经有了使用React.Children方法嵌套React Children的方法，但是我无法找到，如何在组件内部处理额外的JSX。

Answer 1

做这样的事，

var ParentComponent = React.createClass({
    render : function(){
        var el = (<component_you_want_to_nest />);
        return(
            <ComponentCardComponent nestComp={el} />
        )
    }
});

var ComponentCardComponent = React.createClass({
render : function(){
    <div>
        {this.props.nestComp}
    </div>
}

}）;

Answer 2

您只需使用this.props.children。

要处理此特定数据结构，您可以使用React.Children utilities。

例如，如果在您的情况下，您只想为Card中的每个子组件添加包装div，您可以写：

const Card = React.createClass({
    render: function() {
        const wrappedChildren = React.Children.map(
            this.props.children,
            function(oneChild) {
                return (
                    <div className="wrappingDiv">
                        {oneChild}
                    </div>
                );
            },
        );
        return (
            <div className="cardContainer">
                {wrappedChildren}
            </div>
        );
    },
});

// then:
<Card>
   <Logo />
   <Timer />
</Card>

嵌套动态响应组件，在组件内动态添加自定义JSX？

2 个答案: