如何将属性传递给无状态/功能组件？

Question

在我的核心,index.js我正在渲染这样的组件:

<TestBundle lang={lang} />

我想要获取lang该组件内的属性.

为什么我在渲染时变量未定义<TestBundle />？

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

export default TestBundle

================================================== ========

---

所以这里有一个修改

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

//不同的例子

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

lang是一个属性.你可以解构:

const TestBundle = ({ lang }) => (

或者手动完成:

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

基本的无状态组件; 涵盖在所有文档中:传递给无状态/功能组件的参数是组件属性.