react项目组件间多重传值

Question

react项目一个组件index.tsx文件里有三个函数组件，另外一个组件index.tsx文件有一个函数组件，现在需要把这个单独的函数组件，引入在那三个函数组件里面的父组件里，如果这个外来的组件需要从其他子组件里传值过去才可以显示，那么要怎么做呢？

Answer 1

• 这篇博客: [万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行，步骤有详解中的 修改 index 部分样式 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 这一部分主要是增加一些全局会使用的 CSS，包括 a 标签、li 标签的一些排版问题，目前实现的 CSS 如下：

  body {
    margin: 0;
    width: 1980px;
    background-color: #f3f5f7;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
      'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }
  
  li {
    list-style: none;
  }
  
  input {
    outline: none;
  }
  
  a {
    text-decoration: none;
    color: #050505;
  }
  a:hover {
    color: #00a4ff;
  }
  dd {
    margin: 0;
  }
  
  .flex {
    display: flex;
  }
  .relative {
    position: relative;
  }
  .absolute {
    position: absolute;
  }
  .container {
    width: 1200px;
    margin: auto;
    background-color: transparent;
  }
  .flex-center {
    align-items: center;
  }
  .float-left {
    float: left;
  }
  .float-right {
    float: right;
  }
  

• 以下回答由chatgpt基于相关博客总结生成:

  在React项目中实现组件间多重传值，可以通过使用props和state来进行数据传递。

  首先，你可以在父组件中定义一个state来存储需要传递的值。然后，通过props将这个state传递给各个子组件。

  在父组件中，可以创建一个函数来更新state的值。然后，在需要传递值的子组件中，通过props调用这个函数，从而更新父组件中的state值。

  下面是一个实现的示例代码：

  // 在父组件中index.tsx中定义一个state来存储需要传递的值
  class ParentComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: ''
      };
    }
  
    handleChange = (newValue) => {
      this.setState({ value: newValue });
    }
  
    render() {
      return (
        <div>
          <ChildComponent1 value={this.state.value} />
          <ChildComponent2 value={this.state.value} />
          <ChildComponent3 value={this.state.value} />
          <ChildComponent4 onChange={this.handleChange} />
        </div>
      );
    }
  }
  
  // 子组件ChildComponent1、ChildComponent2、ChildComponent3通过props接收value值，并显示在组件中
  const ChildComponent1 = (props) => (
    <div>
      <h3>Child Component 1</h3>
      <p>{props.value}</p>
    </div>
  );
  
  const ChildComponent2 = (props) => (
    <div>
      <h3>Child Component 2</h3>
      <p>{props.value}</p>
    </div>
  );
  
  const ChildComponent3 = (props) => (
    <div>
      <h3>Child Component 3</h3>
      <p>{props.value}</p>
    </div>
  );
  
  // 子组件ChildComponent4通过props接收onChange函数，并在输入框中获取新值，通过调用onChange函数更新父组件的state值
  class ChildComponent4 extends React.Component {
    handleChange = (event) => {
      this.props.onChange(event.target.value);
    }
  
    render() {
      return (
        <div>
          <h3>Child Component 4</h3>
          <input type="text" onChange={this.handleChange} />
        </div>
      );
    }
  }
  
  export default ParentComponent;
  

  在父组件中，定义了一个state来存储需要传递的值。然后通过props将这个state传递给子组件ChildComponent1、ChildComponent2和ChildComponent3。同时，将一个函数handleChange通过props传递给子组件ChildComponent4，用来更新父组件中的state值。

  在子组件中，通过props接收父组件传递的value值，并在组件中显示出来。在ChildComponent4中，通过onChange事件监听输入框的变化，并将新值通过调用父组件传递的函数来更新父组件中的state值。

  这样，当在ChildComponent4中输入新值时，会触发handleChange函数，更新父组件的state值，从而影响到其他的子组件，实现了组件间的多重传值。