react项目组件间多重传值

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

这篇博客: [万字长文]使用 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值，从而影响到其他的子组件，实现了组件间的多重传值。