在 React.js 中将 props 传递给另一个组件

【问题标题】：Passing props to another component in React.js在 React.js 中将 props 传递给另一个组件
【发布时间】：2019-12-04 00:38:15
【问题描述】：

我有一个像下面这样的组件

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 值不起作用？

【问题讨论】：

标签： reactjs react-props

【解决方案1】：

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

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

或者

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

【讨论】：

谢谢@Dupocas。使用您的解决方案，我仍然得到像 <input type="text" name="paper" id="mouse" class="pen" required=""> 这样的输出。应该是<input type="text" name="paper" id="mouse" class="pen" required="required">。
@abuabu DOM 元素上的required 属性的值不相关。如果存在，则表示需要输入。所以required=""、required="required" 或required="foo" 都需要输入。仅当该属性全部丢失时才不需要。 React 添加一个空字符串作为值，因为值是什么并不重要。