javascript - 将 JSX 传递给组件 vs dangerouslySetInnerHTML

Question

我一直在研究 React 示例，并且一直在努力构建一些组件。现在我觉得我遇到了一个关于组件结构和嵌套的基本“脑放屁”。

我追求的是:

带有可选标签和帮助文本的输入组件。

我现在拥有的:(确实有效)

输入.js

//...//
var MyInput = React.createClass( {

render: function() {

    //...//

    var helpText = null;

    if( typeof this.props.helpText !== 'undefined' ){
      helpText = <p className="help-block" > {this.props.helpText} </p>;
    }

    return (
      <div className={ className }>
        <MyLabel showLabel={ this.props.showLabel} htmlFor={ this.props.name }>
          { this.props.title }
        </MyLabel>
        <input
          type={ this.props.type || 'text' }
          name={ this.props.name }
          onChange={ this.changeValue }
          value={ this.getValue() }
          checked={ this.props.type === 'checkbox' && this.getValue() ? 'checked' : null }
          placeholder={ this.props.title }
        />
            <span className='validation-error'>{ errorMessage }</span>
            {helpText}
      </div>
    );
  }
});

module.exports = MyInput;

登录表单.js

//...//

var LoginForm = React.createClass({

   // ... //

    render: function() {
        return (
            <Form className=" col-sm-11 col-lg-10 block-center loginFrm" >

                <div className="row">
                    <FrmInput value ="" 
                            name="username" 
                            title="Username" 
                            className="col-sm-5" 
                            showLabel={false}
                            helpText= {  <span> Help text with <a href="#"> link </a> </span>}
                            required />
                    <FrmInput value ="" 
                            type="password"
                            name="password" 
                            title="Password" 
                            className="col-sm-5" 
                            showLabel={false}
                            required />

                    <button type="submit" 
                        className="btn btn-default input-sm " 
                        >
                        Sign In 
                    </button>

                </div>

                <div className="row">
                    <div className="pull-right" >
                        <FrmCheckbox name="rememberMe"
                            title="Remember Me"
                        />
                    </div>
                </div>

            </Form>
        );
    },

});

module.exports = LoginForm;

使标签可选很容易。我使用 BOOL showLabel <MyInput/> 上的属性(property)组件并将其传递到 MyLabel 组件中。 showLabel假定为 TRUE，因此会显示标签，除非您将 showLabel 设置为 false，如上所示(然后 <MyLabel/> 仅返回 NULL)。

我首先用 <help/> 尝试了类似的方法组件在 <MyInput/> 中输入后添加可选的帮助文本.一切正常，直到我在帮助文本中添加了一个链接。研究我发现 dangerouslySetInnerHTML 作为将 HTML 内容传递到组件中的一种方式。在测试时，我还发现上面的代码似乎也可以工作，但我并不完全了解为什么以及这种方法有多“好”。

简而言之，我似乎只是将 JSX 对象传递到我的组件中进行渲染。里面<Form> (来自 LoginForm.js )在 <FrmInput/> 上组件有一个名为 helpText 的属性设置如下

helpText= {  <span> Help text with <a href="#"> link </a> </span> }

在<MyInput/>里面我正在测试/监听 helpText 的组件属性并在找到时将其设置为变量(再次用 JSX 包装)

var helpText = null;

if( typeof this.props.helpText !== 'undefined' ){
  helpText = <p className="help-block" > {this.props.helpText} </p>;
}

然后在渲染方法中我有 { helpText }

总而言之，我似乎只是在传递 javascript 对象(通过 JSX)直到最终的渲染方法。我没有在教程或文档中看到以上内容，所以我只是在寻找专业意见。

是上述“良好”做法还是如何更好地处理。

Answer 1

您的方法没有任何“错误”。一些有助于简化流程的建议。

您可以将此 block 缩短为简单的内联三元组:

var helpText = null;

if( typeof this.props.helpText !== 'undefined' ){
  helpText = <p className="help-block" > {this.props.helpText} </p>;
}

您可以删除上面的内容，并在您的渲染中将 {helpText} 替换为:

{ this.props.helpText ? this.props.helpText : null }

在表单输入中删除内联 helpText html 并使用 JSX 括号移动到变量。

const helpTextContent = ( <span> Help text with <a href="#"> link </a> </span> );

然后内联:helpText = { helpTextContent }

最后，如果您使用的是 ES6，则可以使用以下语法来简化 props 的使用:

let { helpText, someOtherProp, anotherProp } = this.props;

然后你可以直接引用helpText或someOtherProp，而不需要每次都使用this.prop。

希望对您有所帮助!