Question

你好，我目前遇到了一个问题，就是我不知道如何创建反应组件，以后我再传递类似这样的内容

<CustomComponent transform={e=> {...e, text = e.text.toUpperCase()}}> </CustomComponent>

任何提示/提示将不胜感激。谢谢

Answer 1

如果您要使用简洁的箭头函数创建对象，则必须将对象文字包装在()中，以便JavaScript解析器知道您没有使用完整的函数体。另外，您使用:而不是=来将属性键与其在对象常量中的值分开。所以：

                                             v−−−−−−−−−−−−−− Colon, not equal sign
<CustomComponent transform={e => ({...e, text: e.text.toUpperCase()})}> </CustomComponent>
Parens −−−−−−−−−−−−−−−−−−−−−−−−−−^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

Answer 2

尝试

const CustomComponent = ({ prop }) => {


     ...your code using prop (of any name you want)

}
export default CustomComponent

您以后应该可以将其导入为<CustomComponent prop={myPropName} />

如果您有多个，它将看起来像：

 const CustomComponent = ({ p1, p2, p3 }) => {


     ...your code using prop (of any name you want)

}
export default CustomComponent

您以后应该可以将其导入为<CustomComponent p1={myp1} p2={myp2}/>

Answer 3

您正在尝试传递对返回对象的函数的引用，但是语法不正确。应该是

 transform={e => ({ ...e, text: e.text.toUpperCase() })}

ReactJS传递箭头函数作为道具

3 个答案: