React尚硅谷020-036(props、ref、受控组件)，html实体字符

这个问题似乎是指的React组件设计相关的一系列概念，包括props、ref、受控组件和HTML实体字符的使用。

1. Props：Props是React中传递数据的方式，可以通过定义组件的初始props值来确保组件在不同场景下的行为一致性。

// 定义一个简单的组件，它接收name和age作为props
function Greeting({ name, age }) {
  return <h1>Hello, {name}, age {age}!</h1>;
}
 
// 渲染组件时传递props
ReactDOM.render(<Greeting name="John" age={25} />, document.getElementById('root'));

2. Refs：Refs提供了一种访问DOM节点或者组件实例的方法。

// 创建一个input组件并获取其值
class MyInput extends React.Component {
  focus() {
    this.inputRef.focus();
  }
 
  render() {
    return <input ref={(input) => (this.inputRef = input)} />;
  }
}

3. 受控组件：在HTML表单元素中，可以使用state来控制输入值，使得表单元素成为受控组件。

class ControlledInput extends React.Component {
  constructor() {
    super();
    this.state = { value: '' };
  }
 
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
 
  render() {
    return (
      <input
        value={this.state.value}
        onChange={(event) => this.handleChange(event)}
      />
    );
  }
}

4. HTML实体字符：在HTML中，某些字符是预留的，如果需要在文本中使用这些字符，则需要使用HTML实体字符。

<p>This is a less-than character: &lt;</p>
<p>This is a greater-than character: &gt;</p>
<p>This is a copyright symbol: &copy;</p>

在React中，你可以直接在JSX中使用这些实体字符，无需转义。

const EntityComponent = () => (
  <div>
    <p>This is a less-than character: &lt;</p>
    <p>This is a greater-than character: &gt;</p>
    <p>This is a copyright symbol: &copy;</p>
  </div>
);

以上代码提供了React中props、ref、受控组件和HTML实体字符使用的简单示例。