javascript - reactjs，常量，传递属性

Question

我是新来的 react 并接手了一项紧急工作。我有一个在索引页上调用的组件，我正试图将一个对象属性推送到其中。

---

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

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>