Question

我是新手做出反应并接管了一项紧急工作。我有一个在索引页面上调用的组件，我正在尝试将对象属性推入其中。

所以这里有两种方法可以做到这一点

const TestBundle = ({lang}) => (
  <section className='relative-container'>
    <div className='row'>
        {lang}
    </div>
  </section>
)

TestBundle .propTypes = {
  lang: React.PropTypes.object.isRequired
}

^这有效......但是如何让下一个概念正常工作 - 当我尝试这个解决方案时，我遇到了各种各样的错误。

const TestBundle = (props) => {
    const lang = props.lang

      <section className='relative-container'>
        <div className='row'>
            {lang}
        </div>
      </section>
}

//不同的例子

const TestBundle = (props) => {
    const lang = props.lang

      <section className='relative-container'>
        <div className='row'>
            {lang}
        </div>
      </section>
}

export default TestBundle

- 但这会出现错误

./src/components/Services/TestBundle.js
Module build failed: SyntaxError: D:/wamp/www/project/react/src/components/Services/TestBundle.js: Unexpected token (5:2)

  3 | 
  4 | const TestBundle= (props) => {
> 5 |   const lang = props.lang
    |   ^
  6 |   
  7 |   <section className='relative-container'>
  8 |

Answer 1

简单修复;你需要为JSX添加一个return语句。就目前而言，你没有返回任何东西而且你正在将JSX与你的常量定义混合：

const TestBundle = (props) => {
  const lang = props.lang;
  return (
    <section className='relative-container'>
      <div className='row'>
        {lang}
      </div>
    </section>
  );
}

或者，如果您更喜欢稍微缩短语法：

const TestBundle = (props) => <section className='relative-container'>
    <div className='row'>
      {props.lang}
    </div>
  </section>

reactjs，const，传递属性

1 个答案: