React中如何修改HTML元素样式、点击控制组件显隐及创建函数式组件？

1. 点击按钮显示ConfigureWindow组件实现 #

实现思路 #

在父组件App中通过state控制ConfigureWindow的显隐状态，将状态更新方法通过props传递给子组件，实现开启/关闭配置窗口的能力。

完整修改代码 #

修正后的App组件

class App extends React.Component {
  // 初始化state，默认隐藏配置窗口
  state = {
    showConfigureWindow: false
  }

  // 打开配置窗口方法
  openConfigureWindow = () => {
    this.setState({ showConfigureWindow: true })
  }

  // 关闭配置窗口方法
  closeConfigureWindow = () => {
    this.setState({ showConfigureWindow: false })
  }

  render() {
    return (
      <div id="appWrapper">
        {/* 条件渲染：只有state为true时才渲染配置窗口 */}
        {this.state.showConfigureWindow && <ConfigureWindow onClose={this.closeConfigureWindow} />}
        {/* 给按钮绑定点击事件触发打开窗口 */}
        <button 
          id="configureClocksButton"
          onClick={this.openConfigureWindow}
        >
          Configure clocks
        </button>
        <section id="clocksHere"></section>
      </div>
    );
  }
}

修正后的ConfigureWindow组件

const ConfigureWindow = (props) => (
  <div id="configureWindowWrapper">
    <div id="configureWindow">
      <section id="addCitySection">TODO: adding a city</section>
      <div id="verticalLine"></div>
      <section id="listOfCities">
        <header>
          <h1>Available cities</h1>
          <div id="closeConfigureWindowWrapper">
            {/* 给关闭按钮绑定点击事件，调用父组件传过来的关闭方法 */}
            <img 
              src="../src/images/exit.png" 
              id="closeConfigureWindow" 
              alt="关闭窗口"
              onClick={props.onClose}
            />
          </div>
        </header>
        <section id="availableCities"></section>
      </section>
    </div>
  </div>
);

常见报错排查 #

如果之前实现时出现报错，通常是以下原因：

• 类组件中未正确初始化state，或者修改state时用了直接赋值而非setState方法
• 事件回调函数的this指向错误，上述代码用箭头函数定义类方法避免了this指向问题
• 条件渲染语法错误，比如用了if语句直接写在JSX结构中
• 子组件未正确接收props，或者调用props方法时名称拼写错误

2. React函数式组件创建说明 #

函数式组件是React目前推荐的组件写法，在React 16.8版本引入Hooks后，函数式组件已经可以完全替代类组件实现所有能力。

基础规则 #

• 组件名称必须以大写字母开头，React以此区分自定义组件和原生HTML标签
• 组件是一个普通JS函数，接收唯一的props对象作为参数，存储父组件传递的所有属性
• 必须返回合法的JSX结构，返回null时表示不渲染任何内容

常见写法 #

基础写法

// 写法1：函数声明写法
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 写法2：箭头函数写法
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

// 简写：只有返回逻辑时可以省略大括号和return关键字
const Welcome = (props) => <h1>Hello, {props.name}</h1>;

带状态的函数式组件

使用useState Hook可以给函数式组件添加内部状态：

import { useState } from 'react';

const Counter = () => {
  // 定义状态count，默认值为0，setCount是更新状态的方法
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>加1</button>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者user16336116