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

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
  // ...

基本的无状态组件； 所有文档中都涉及：传递给无状态/功能组件的参数是组件属性。

Answer 2

我相信当您将lang传递给TestBundle时，您需要对其进行解构，如下所示：

const TestBundle = ({lang}) => (

您还可以像下面这样在组件外部（在组件下方）验证道具：

TestBundle.propTypes = {
  lang: React.PropTypes.string.isRequired
};