Question

我有一个像这样的功能无状态组件：

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

我想把它称为容器内的一个函数

{Map()}

通常我知道我可以包括孩子

<Map>
    <ChildComponent />
</Map>

在将组件作为函数调用时，有没有办法做同样的事情？

Answer 1

我想把它称为函数，是的，你可以。但是，你将不得不重新组织你的组件，它将成本。如果没有妥协，你不能互换使用它们。

以下是一个示例：

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>

有没有办法将子组件添加到被称为函数的功能无状态组件？

1 个答案: