Reactjs 我应该如何将字符串作为props 传递给 React 组件

发布于05月05日

我有一个字符串组件，它呈现一个标题:

const String = (someString) => {
  return (
    <h1>{someString}</h1>
  )
}

const App = () => {
  const someString = 'abc'
  return (
    <String someString={someString}/>
  )
}

export default App;

然而这一失误出局了，抛出了Objects are not valid as a React child个.我可以通过如下方式修改字符串组件来解决此问题:

const String = (someString) => {
  return (
    <h1>{someString.someString}</h1>
  )
}

我搞不懂为什么someString在Reaction中被计算为对象.我可以通过控制台确认它是一个对象.在第一个字符串组件中记录someString，其中我看到:

{someString: 'hello world'}个

这是我应该通过string.string传递原始字符串作为props 的正确方式吗？通过阅读一些文章，我认为我应该可以简单地通过string.

https://www.g2i.co/blog/understanding-the-objects-are-not-valid-as-a-react-child-error-in-react个

const String = ({someString}) => { //this line needs curly brackets return ( <h1>{someString}</h1> ) } const App = () => { const someString = 'abc' return ( <String someString={someString}/> ) } export default App;

Reactjs 我应该如何将字符串作为props 传递给 React 组件

推荐答案

Reactjs相关问答推荐

CSS转换不适用于React MUI对象

LocalStore未存储正确的数据

Reactjs中的chartjs和reaction-chartjs-2的问题

不同步渲染

Reaction-路由-DOM v6与v5

StrictMode+SetInterval=双重渲染(即使使用useEffect清理)

useEffect 和 ReactStrictMode

如何管理可重用无线电输入的 React 状态？

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗？

useMemo 依赖项的行为

如何在 JS 中绘制具有不同笔画宽度的样条线

在 React-Select 中显示多值的倒序

将水平滚动视图添加到底部导航选项卡

带有 webpack 错误多个文件匹配路由名称的 Expo-router.无法Bundle 或部署应用程序

React 中的 Slide API Mui 在开始而不是结束时触发侦听器

调用 Jest 和服务方法的问题

如何使用 useEffect 和 if 语句 React

列表应该有一个唯一的关键props

为什么重新渲染不会影响 setTimeout 的计数？

点击提交后自动添加#