有没有一种方法可以将子组件添加到称为功能的功能性无状态组件中？

Question

I have a functional stateless component like so:

const Map = (props) => {
    ...
}

And I want to call it as a function inside of a container

{Map()}

Normally I know I can include children

<Map>
    <ChildComponent />
</Map>

Is there a way do the same thing while calling the component as a function?

Answer 1

I want to call it as a function , yes you can. But then you will have to restructure your components and it will come at come cost. You cannot use them interchangeably without some compromises.

Following is a sample:

 const Parent = function(props){ return ( <div> <h3> This is Parent</h3> { Array.isArray(props.children) ? props.children.map(x => typeof(x) === 'function' ? x() : x) : null } </div> ) } const Child = function(props){ return ( <p>This is Child! My name is {props.name}</p> ) } let JSX = Parent({ children: [ Child.bind(null, {name: 'foo'}), Child.bind(null, {name: 'Bar'}) ] }); ReactDOM.render(JSX, document.getElementById('content')); let JSX2 = ( <Parent> <Child name='Jon'/> </Parent> ) ReactDOM.render(JSX2, document.getElementById('content2')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='content'></div> <hr/> <div id='content2'></div>