将状态（索引）传递给几个孩子

Question

在学习了如何将状态传递给孩子之后，我现在想知道如何在孩子之间做到这一点。

Parent:

const PostTemplate = ({ data }) => {
  const [isIndex, setIndex] = useState(0);

  return (
    <>
        <Slider
          setIndex={isIndex}
          {...data}
        />
        <Views
          setIndex={setIndex}
          {...data}
        />
    </>
  );
};

Child1 (Views):

const Views = (data) => {
  return (
      <div>
        {data.views.edges.map(({ node: view }, index) => (
          <div
            onClick={() => {
              data.setIndex(index);
            }}
          >
            <p>Hello</p>
            />
          </div>
        ))}
      </div>
  );
};

Child2 (Slider):

const Slider = (data) => {
  return (
      <Swiper initialSlide={data.isIndex}>
        {data.views.edges.map(({ node: view }) => (
          <SwiperSlide>Slide</SwiperSlide>
        ))}
      </Swiper>
  );
};

这会返回一个相当奇怪的错误：undefined is not an object (evaluating 'el.classList')。

我想做的是将 Views 索引传递给 Slider。

感谢您的帮助！

Answer 1

Props：

• Props 是在添加到 ReactDOM 时传递给组件的数据
• Props 是不可变的 - 意味着组件永远无法更改它自己的 props。

数据流：

• 当两个子组件必须共享/使用相同的数据时，父组件会将这些数据传递给子组件。 数据（作为 Props）从上到下流动
• 现在该数据由父组件拥有。因此，该数据的任何更改也必须由该父组件处理。例如，如果子组件想要更改此数据，它们必须调用父组件的更改处理程序。 将事件流从子级更改为父级。

在您的示例中， PostTemplate 是父级，而 Views & 是父级。 Slider 是子项。

• PostTemplate 拥有并管理索引数据（状态）。
• PostTemplate 将发送索引数据（状态）到子组件：Views & Slider
• 现在两个组件的 Props 中都有索引值。
• 子组件Views需要更改Index的值。因此，父组件还将其自己的索引更改处理程序传递给 Views 组件，
• 当需要更改 Index 值时，Views 组件会调用从父组件获取的更改处理程序作为 props。

这是您的相关代码的一个工作示例：

function Slider(props) {
   return (
     <fieldset>
       <legend>Slider Component </legend>
       <p>Got Index data as Props: {props.index}</p>
     </fieldset>);
}

class PostTemplate extends React.Component {
  constructor(props) {
    super(props);
    this.setIndex = this.setIndex.bind(this);
    this.state = {index: 0};
  }

  setIndex(e) {
    this.setState({index: e.target.value});
  }

  render() {
    const index = this.state.index;
    return (
      <fieldset>
        <legend>PostTemplate Component:</legend>
        <ol>
          <li key={1}> This is parent component which has two child componets: Slider, Views </li>
          <li key={2}> As Index data is used by both of it's child components, Index data is initilized and managed by this component.</li>
          <li key={3}> When a child component needs to use this data (state:index), Posttemplate (parent) will pass the value as props  </li>
          <li key={3}> When a child component needs to change this data (state:index), Posttemplate (parent) will pass the changeHandler as props  </li>
        </ol>
        <Views
           index={index}
           setIndex={this.setIndex}/>
        <Slider
          index={index} />
      </fieldset>
    );
  }
}

function Views(props) {
  return (<fieldset>
            <legend>Views Component </legend>
            <p>Got Index data as Props: {props.index}</p>
            <p>Got index change handler function from Props: {typeof props.setIndex }</p>
            <input
                  value={props.index}
                  onChange={props.setIndex} />
           </fieldset>);
}

ReactDOM.render(
  <PostTemplate />,
  document.getElementById('root')
);

<script src="https://unpkg.com/react/umd/react.development.js">
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js">

<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

在 CodePen 上尝试