第3章 React的一些小细节

1.关于空格

在HTML中，浏览器将元素间的多行空格渲染成一个空格，在JSX中则要指定渲染空格才会渲染，使用 {" "} 来渲染

return (
  <div>
    <a href="">Google</a>{" "}
    <a href="">Facebook</a>
  </div>
);

// 渲染出来的为Google和Facebook之间有一个空格

2.关于动态渲染HTML

JSX内置XSS攻击保护，这样默认的禁止动态的产生HTML标签，这一般情况都是好的，但是有时候也带来不变，比如说渲染Markdown格式。

React提供 dangerouslySetInnerHTML 来跳过XSS保护，直接渲染，对于渲染marked,可以使用一个 marked npm包来渲染

npm install --save marked

import marked from 'marked';

//...
<span dangerouslySetInnerHTML={{ __html=marked(this.props.descriptions) }} />
// 使用marked函数
// 设置去除XSS保护

3.关于内联样式

React内联样式多用于动态的或者依据状态的外观，其他的css规则仍然分离出来。另外：

使用camel case 的表示方法
不必指定 px 单位， React自动添加

比如：

class Hello extends Component {
  render() {
    let myStyle = {
      width: 100,
      heigth: 50,
      padding: 5em,
      backgroundColor: '#eee'
    }

    return (
      <div style={myStyle}>Hello world</div>
    )
  }
}

4.关于表单组件

表单组件分为：可控组件和不可控组件。

Controlled Components

一个from组件如果有 value 或 checked 属性则称为可控组件。

特别情况：

1.textarea 标签

// 在html中，<textarea>的value为它的子节点
<textarea>hello world</textarea>

// 在JSX中，使用 value属性
<textarea value="hello world" />

2.select 标签

// 在html中使用 'selected' 表示option被选中
<select>
  <option selected>apple</option>
  <option>pear</option>
</select>

// REACT用 'value'对应的方式
<select value='A'>
  <option value='A'>apple</option>
  <option value='B'>pear</option>
</select>

不可控组件

在表单组件中，input元素没有 value 属性的组件称之为uncontrolled component，如果想要设置一个不可控组件的初始值，使用 defaultValue, 而不是 value，可以使用 onSubmit事件来处理非可控表单组件

handleSubmit(e) {
  console.log('Submitted values are:',
    e.target.name.value,
    e.target.email.value
  );
  e.preventDefault();
}

render() {
  return (
    <form onSubmit={this.handleSubmit.bind(this)}>
      <div className="formGroup">
        Name: <input name="name" type="text" />
      </div>
      <div className="formGroup">
        E-mail: <input name="email" type="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

2016/11/30 22:32:55

最后编辑于：2017.12.04 20:54:55

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

第3章 React的一些小细节