尝试设置 props.children 时出现 TypeError: props.children 不是 function
[英]Getting TypeError: props.children is not a function when trying to set props.children
问题描述
I am trying to set the children values using props but I am getting an error TypeError: props.children is not a function. What am I missing.
我正在尝试使用 props 设置子值，但出现错误类型错误TypeError: props.children is not a function.我错过了什么。 I want to use SpeakerRendererComponent inside SpeakersRender.我想在 SpeakersRender 中使用 SpeakerRendererComponent。
import React, {Component} from 'react';
const SpeakerRendererComponent =(props) =>{
const speakerCollection = [
{imageSrc:"img1", personName:"Peter"},
{imageSrc: "img2", personName: "Alexander"},
{imageSrc:"img3", personName: "Frado"}
];
return props.children({
speakerCollection:speakerCollection
});
}
export default SpeakerRendererComponent;
import React from 'react';
import SpeakerRendererComponent from './SpeakerRendererComponent';
function SpeakersRender() {
return (
<SpeakerRendererComponent>
{({speakers}) =>{
return (
<div>
{speakers.map(({ imageSrc, name }) => {
return (
<img
src={`/images/${imageSrc}.png`}
alt={name}
key={imageSrc}
></img>
);
})}
</div>
);
}};
</SpeakerRendererComponent>
);
};
export default SpeakersRender;
2 个解决方案
解决方案1
0 2021-01-28 05:37:10
You can't set props like that.你不能那样设置道具。 props are kind of parameters to your function. Once you get that you can't modify them. props 是您的 function 的一种参数。一旦获得，就无法修改它们。 You can only save them in state or pass them to children components.您只能将它们保存在 state 中或将它们传递给子组件。
If you need to work with the values inside props you can try to maintain a local state for that如果您需要使用 props 中的值，您可以尝试为此维护一个本地 state
解决方案2
0 2021-01-28 06:54:01
I see what you're trying to accomplish and there is a much simpler way to get there.我明白你想要完成什么，有一种更简单的方法可以实现。 You want to pass a function as a child and then use that function inside the component being called to display information that the component stores locally.您想要将 function 作为子项传递，然后在被调用的组件内部使用该 function 来显示组件存储在本地的信息。
<html> <body> <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin> </script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <div id="root"></div> <script type="text/babel"> const SpeakerRendererComponent = ({imgFunc}) => { const speakerCollection = [ {imageSrc:"https://via.placeholder.com/140x100", personName:"Peter"}, {imageSrc: "https://via.placeholder.com/140x100", personName: "Alexander"}, {imageSrc:"https://via.placeholder.com/140x100", personName: "Frado"} ]; return imgFunc({speakers: speakerCollection}) } const SpeakersRender = () => { const imgFunc = ({speakers}) => { return ( <div> {speakers.map(({ imageSrc, personName }) => { return ( <div key={personName}> <img src={`${imageSrc}`} alt={personName} ></img> {personName} <hr /> </div> ); })} </div> ); } return ( <div> <SpeakerRendererComponent imgFunc={imgFunc} /> </div> ); } ReactDOM.render( <SpeakersRender />, document.getElementById('root') ); </script> </body> </html>
Note how that mapping function is now separated from the element call and is being passed to SpeakerRendererComponent as a prop.请注意映射 function 现在如何从元素调用中分离出来，并作为 prop 传递给SpeakerRendererComponent 。 Now, you will render SpeakerRendererComponent and pass the imgFunc to it.现在，您将渲染SpeakerRendererComponent并将imgFunc传递给它。 Then inside SpeakerRendererComponent you will call that function with the right data.然后在SpeakerRendererComponent ，您将使用正确的数据调用 function。 This will do exactly what you want.这将完全符合您的要求。
I would gladly load this into CodeSandbox, but it's currently down.我很乐意将它加载到 CodeSandbox 中，但它目前已关闭。 I had to test it in my local environment and it works fine.我必须在我的本地环境中测试它并且它工作正常。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.