React类组件间如何传递Ranger的滑动输入值至Storymap？

嘿，我来帮你搞定React组件间传值的问题！你需要把Ranger组件的滑块数值传递给Storymap来调整div尺寸，最直接的方案是通过共同父组件作为中间层来传递数据，下面是具体的实现步骤和代码示例：

1. 用父组件维护共享状态 #

首先创建一个父组件（比如App.js），用来存储Ranger的滑块值，同时提供更新这个值的方法，再把值和方法分别传给Storymap和Ranger组件。

import React, { Component } from 'react';
import Ranger from './header';
import Storymap from './Storymap'; // 假设你的Storymap组件路径

class App extends Component {
  // 初始化共享状态，和Ranger的初始值保持一致
  state = {
    sliderValue: null
  };

  // 定义更新滑块值的方法，传给Ranger组件调用
  updateSliderValue = (newValue) => {
    this.setState({ sliderValue: newValue });
  };

  render() {
    return (
      <div className="app-container">
        {/* 把更新方法传给Ranger */}
        <Ranger onValueChange={this.updateSliderValue} />
        {/* 把当前滑块值传给Storymap */}
        <Storymap currentValue={this.state.sliderValue} />
      </div>
    );
  }
}

export default App;

2. 修改Ranger组件，传递数值给父组件 #

在你的header.js里，需要监听滑块的变化事件，把处理后的数值（确保在-70到70之间）通过props传给父组件：

class Ranger extends Component {
  state = { inputValue: null };

  // 处理滑块输入变化的方法
  handleSliderChange = (e) => {
    const rawValue = parseInt(e.target.value);
    // 确保数值在-70到70的范围内
    const clampedValue = Math.max(-70, Math.min(70, rawValue));
    
    this.setState({ inputValue: clampedValue });
    // 调用父组件传来的方法，传递处理后的数值
    this.props.onValueChange(clampedValue);
  };

  render() {
    return (
      <Flex layout="row" className="navbar">
        <span style={{ color: "white", fontSize: 15 }}>Statsh</span>
        {/* 这里补充你的滑块输入框，绑定onChange事件 */}
        <input
          type="range"
          min="-70"
          max="70"
          value={this.state.inputValue || 0} // 初始值设为0或者你需要的默认值
          onChange={this.handleSliderChange}
        />
      </Flex>
    );
  }
}

export default Ranger;

3. 在Storymap组件中使用传递来的数值调整尺寸 #

最后在Storymap组件里，接收父组件传来的currentValue，用它来调整div的样式：

import React, { Component } from 'react';

class Storymap extends Component {
  render() {
    const { currentValue } = this.props;
    // 根据滑块值计算div的尺寸，这里举个例子，你可以根据需求调整逻辑
    const adjustedStyle = {
      // 比如基础宽度200px，滑块值每变化1，宽度变化2px
      width: `${200 + (currentValue || 0) * 2}px`,
      height: '150px',
      backgroundColor: '#f0f0f0',
      margin: '20px 0'
    };

    return (
      <div className="storymap-container">
        {/* 使用调整后的样式渲染div */}
        <div style={adjustedStyle}>根据滑块值调整尺寸的div</div>
        {/* 其他Storymap的内容 */}
      </div>
    );
  }
}

export default Storymap;

额外说明 #

如果你的两个组件层级很深，或者后续需要在更多组件中共享这个数值，也可以考虑使用React Context API或者Redux这类状态管理工具，但对于当前的简单场景，父组件传值是最轻便高效的方案。

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