用变量名替换参数 'props' 在 webpack 1 的 Reactjs 函数语法中不起作用

Question

我正在学习 Lynda 提供的基于 Webpack 1 的 ReactJs 教程。

如果我替换这个：

import 'path/to/style.scss'

export const MyValues = (props) => (
  <div className="values">
    <div className="value-one">
      <span>{props.one}</span>
    </div>
    <div className="value-two">
      <span>{props.two}</span>
    </div>
  </div>
)

对此：

import 'path/to/style.scss'

export const MyValues = (one, two) => (
  <div className="values">
    <div className="value-one">
      <span>{one}</span>
    </div>
    <div className="value-two">
      <span>{two}</span>
    </div>
  </div>
)

（将参数'props'更改为参数'one'和'two'，稍后直接调用变量）

可以编译，但屏幕是空白的。我不知道真正的问题是什么。是语法的问题，还是Webpack 1的问题？

Answer 1

你必须这样做，因为 props 是一个对象

 import 'path/to/style.scss'

export const MyValues = ({one, two}) => (
  <div className="values">
    <div className="value-one">
      <span>{one}</span>
    </div>
    <div className="value-two">
      <span>{two}</span>
    </div>
  </div>
)

Answer 2

您需要解构道具以从中提取 one 和 two 参数

将它们包含在 {} 中，如

import 'path/to/style.scss'

export const MyValues = ({one, two}) => (
  <div className="values">
    <div className="value-one">
      <span>{one}</span>
    </div>
    <div className="value-two">
      <span>{two}</span>
    </div>
  </div>
)

如果你传递像

这样的道具，那么上面的方法实际上会发生什么

<MyValues one="1" two="2" three="3" four="4"/>

如果您只想使用道具 one，two 那么 {one, two} 将使它们可以从道具中获得，您可以像 {one} 和 {two}

用变量名替换参数 'props' 在 webpack 1 的 Reactjs 函数语法中不起作用

Replacing argument 'props' with variable names doesn't work in Reactjs functional syntax with webpack 1

npm

reactjs

webpack

babeljs