在反应中添加一个新的 dom 元素答案

【问题标题】：Appending a new dom element in react在反应中添加一个新的 dom 元素
【发布时间】：2017-11-24 09:13:10
【问题描述】：

我创建了一个自定义组件，如果某个属性设置为true，我想在组件呈现时添加子元素。我使用了以下代码，但未呈现组件。我在这里做错了什么。

    let deleteNode = '';
    if(deletable){
        deleteNode = '<div />'
    }

    let defaultClasses = 'chips chips-rounded';

    return (
        <div className={classNames(classes, defaultClasses)} onClick={ this.onClick }>
            {avatar}
            <span>{this.props.labelText}</span>
            {deleteNode}
        </div>
    )

【问题讨论】：

你可以使用三元{deletable ? '<div />' : ''}
嗯，你的干净多了！ :)

标签： javascript reactjs element

【解决方案1】：

您正在尝试渲染一个组件，但实际上您只是在您的deleteNode 中发送string。您的代码应如下所示

if(deletable){
    deleteNode = (<div />);
}

【讨论】：

【解决方案2】：

我不同的方法是：

render() {
  const defaultClasses = 'chips chips-rounded'
  return (
    <div className={classNames(classes, defaultClasses)} onClick={ this.onClick }>
        {avatar}
        <span>{this.props.labelText}</span>
        {deletable && <div />}
    </div>
  )
}

所以你不需要额外的if 检查。

【讨论】：