将道具传递给 React.js 中的另一个组件

Question

我有如下组件

import React, { Component } from 'react';

class InputText extends Component  {
  render = () => {    
    return (
      <div>
        {this.props.label}
        <input type="text" name={this.props.name} id={this.props.id} class={this.props.class} required={this.props.extraValue}/>
      </div>
    )
  }
}

export default InputText

我正在使用上面的组件，如下所示

<InputText name="paper" class="pen" id="mouse" extraValue="required"/>

我得到如下输出

<input type="text" name="paper" id="mouse" class="pen" required="">

为什么 extraValue 值不起作用？

Answer 1

required is a Boolean。你应该这样传递

<InputText name="paper" class="pen" id="mouse" extraValue={true} />

或者

<InputText name="paper" class="pen" id="mouse" extraValue />

将道具传递给 React.js 中的另一个组件

Passing props to another component in React.js

reactjs

react-props