Question

我是 ReactJS 新手，控制台报如下错误：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

怎么了？

function Test({children}) {
  return (
    <div>
     {children}
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Test> {() => (<h1>Title</h1>)}</Test>
    </div>
  );
}

Answer 1

渲染道具模式的一部分是子组件将子组件作为函数调用以进行渲染。

如果您希望拥有普通的 ReactNode 或函数，则需要检查子项是否为函数以确定如何使用它。

如果您希望子项始终是一个函数，您可以直接调用它而不先进行类型检查，但如果您传入不可调用的内容，则会出现错误。

function Test({children}) {
  return (
    <div>
     {typeof children==='function'? children() : children}
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <Test>{() => (<h1>Title</h1>)}</Test>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

另外，需要确保大括号前没有多余的空格来设置render props函数，否则会被解释为['', function(){}] 不起作用：

      <Test> {() => (<h1>Title</h1>)}</Test>

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

反应儿童功能道具不起作用

2 个答案: