reactjs, const, 传递属性

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>