Question

import React from 'react';

const InputBoxes = ({
  userClick = ''
  , name = ''
  , class_name = ''
  , style = ''})=> (
  <div
    className={class_name.divContainer}
    style={style.divContainer}>
      <form className={class_name.formContainer}
      style={style.formContainer} >
        <input type='text' name={name.userName}
        className={class_name.userName}
        style={style.userName} />

        <input type='text' name={name.userPass}
        className={class_name.userPass}
        style={style.userPass} />

        <button name={name.clientButton}
        className={class_name.clientButton}
        style={style.clientButton}
        onClick={userClick.clientButton}></button>
      </form>

  </div>

);


export default InputBoxes;

我的另一个档案就是这么简单，我希望但是不行，你们可以帮助我，我在这里做错了吗？我应该在dom上渲染div容器divClass，但不要....

import React from 'react';
import reactDOM from 'react-dom';
import InputBoxes from './components/input_boxes';

reactDOM.render(
  <InputBoxes
    className={class_name.divContainer = 'divClass'} />
  ,document.getElementById('root')
);

Answer 1

如果函数参数是class_name，那么你不应该使用className，你应该这样做

<InputBoxes class_name={{divContainer: 'divClass'}} />

通常，下划线符号在JS代码中并不常见。我建议坚持既定惯例以避免混淆。

反应组件渲染

1 个答案: