3月12日日记：【WEBPACK】【REACT】

关于webpack 遇到的问题

本次webpack配置一切顺利，需要注意的地方有两点：

• 在使用babel-loader 的时候要将 node_modules目录剔除，否则会出现项目中载入css的时候出现css-loader 无法加载babel-preset-env 的现象：

{
  test: /\.js$/,
  exclude: /(node_modules)/,
  ...
}

• 关于 alias 的运用， alias 在运用的时候，不需要字符串JSON，而且对象右边需要的是完全目录，下面是错误的：

"Utilities":"./Utilities/"

正确的是：

Utilities: path.resolve(__dirname, "Utilities/")

关于React

今天遇到的问题是：

• 在父组件向子组件传递数据的时候，应把对象拆分而不是将整个对象传入，例如

...
<Color color={color} />
-----------------------------
const Color = ({ color }) => ... // wrong!

而应该是：

<Color {...color} />
const Color = ({ title , color, rating }) =>... // correct

• 关于ref的问题， 如果使用函数形式写ref 应该在组件内定义对应变量，否则会出错。
  例如：

const AddColorPanel = ( { onAddColor }) =>{
  
  const submit = e => {
    e.preventDefault();
    onAddColor({ title: _title.value, color: _color.value});

    _title.value ="";
    _color.value ="";
  }

  return (
    <form onSubmit = {submit}>
      <input type="text" ref={(input) => _title = input} placeholder="color title..." />
      <input type="color" ref={(input) => _color = input} />
      <button type="submit">submit</button>
    </form>
  )
}

上面的是错误的，正确应该是：

const AddColorPanel = ( { onAddColor }) =>{
  let _title, _color;
  
  const submit = e => {
    e.preventDefault();
    // let {_title, _color} = this.refs  
    onAddColor({ title: _title.value, color: _color.value});

    _title.value ="";
    _color.value ="";
  }

  return (
    <form onSubmit = {submit}>
      <input type="text" ref={(input) => _title = input} placeholder="color title..." />
      <input type="color" ref={(input) => _color = input} />
      <button type="submit">submit</button>
    </form>
  )
}

或者以字符形式使用它。