Question

我遇到了奇怪的错误：

未捕获的错误：对象作为React子对象无效（找到：object 和键{element}）。如果您打算呈现儿童集合，改用数组。

  render () {
    const pic = this.props.User.current.pic_url;
    let element;

    if(pic) {
      element = <img className = 'MenuPic light' src = {pic}></img>;
    } else {
      element = <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>;
    }
    return (
      {element}
    )
  }

Answer 1

您只需要返回已经包含element的{{1}}

html element

Answer 2

如果解释器不在JSX模式下，则不需要在元素周围使用{}。

除非您处于以<和>开头和结尾的元素中，否则解释器将不会进入JSX模式。

只需删除元素周围的{}。

Answer 3

应该返回的元素。但是通过删除else块重构了您的代码片段以简化此操作

render () {
  const pic = this.props.User.current.pic_url
  if (pic) {
    return (<img className='MenuPic light' src={pic} />)
  }

  return (<svg
    xmlns='http://www.w3.org/2000/svg'
    height='24'
    viewBox='0 0 24 24'
    width='24'>
    <path d='M0 0h24v24H0V0z' fill='none' />
    <path
      d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z' />
  </svg>)
}

为什么我的简单元素不会在此React渲染方法中渲染？

3 个答案: