Question

我一直在研究反应示例，而且我一直在破坏构建一些组件。现在我觉得我遇到了关于组件结构和嵌套的基本＆＃34; Brain Fart＆＃34;

我之后：

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

我现在拥有的东西：（确实有效）

Input.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;

LoginForm.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;

使标签可选很容易。我在showLabel组件上使用BOOL <MyInput/>属性，并将其传递给MyLabel组件。假设showLabel为TRUE，因此除非您将showLabel设置为false，否则将显示标签（如果<MyLabel/>只返回NULL）。

我首先尝试使用<help/>组件的类似方法，在<MyInput/>内的输入后添加可选的帮助文本。一切正常，直到我在帮助文本中添加了一个链接。研究我发现dangerouslySetInnerHTML是将HTML内容传递给组件的一种方法。在测试的同时我也发现上面的代码似乎也有用，虽然我并没有完全卖出为什么以及如何＆＃34;好＆＃34;这种方法是。

简而言之，我似乎只是将JSX对象传递到我的组件中进行渲染。在<Form>组件的<FrmInput/>内（来自LoginForm.js），有一个名为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）直到最后的渲染方法。我没有看到上面教程或文档中使用的内容，所以我只是在寻找专业意见。

上述＆＃34;好＆＃34;练习或如何更好地处理。

Answer 1

你的方法没有“错误”。一些建议可以帮助简化流程。

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

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并使用parens为JSX移动到变量。

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

然后内联：helpText = { helpTextContent }

最后，如果你使用的是ES6，你可以使用以下语法来减少使用道具的麻烦：

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

然后，您可以直接在不helpText的情况下直接引用someOtherProp或this.prop。

希望有所帮助！

将JSX传递给组件与dangerouslySetInnerHTML

1 个答案: