将数据传递给 child 组件，可以通过单击按钮进行切换

Question

我想在单击按钮时将不同的数据传递到我的滑块组件。我想在单击按钮时传递 'true ' 或 'false'。为此，我使用了以下代码，

class DashboardV2 extends React.Component {

  constructor(props){
    super(props);
    this.state = {
        data: 5,
        edit: false
    }
}
onPress=() => {
  this.setState( { edit: !this.state.edit })}

  render() {
    const title = brand.name + ' - Dashboard v2';
    const description = brand.desc;
  const {data,edit} = this.state; 
    return (
      <div>
        <section>
          <div >
            <h1 style={{textTransform:'uppercase'}}>Communication Skills</h1>
              <p >
                {edit ? 'yes':'no'}
              </p>
              <button onClick={this.onPress}>Edit</button>
          </div>
          <div >
         <Slider1 dataParentToChild1 = {edit} />
         </div>
        </section>
      </div>
    );
  }
}

export default withStyles(styles)(DashboardV2);

如代码所示，我想在 this.state 中切换编辑变量。使用此代码可以实现切换并呈现在屏幕上，我可以通过段落标签内的 {edit ? 'yes':'no'} 清楚地看到它。但是这种编辑变量的切换不能通过专业人士传递给 Slider1 child <Slider1 dataParentToChild1 = {edit} />。请帮我解决这个问题。

我的最终目标是在单击按钮时将 true 或 false 值传递给名为 Slider1 的 child 组件。

这是Slider1组件代码，

const sliderProps = {
  width:0,    //dims[0]
  height:0,   //dims[1]
  fill: "none",
  opacity: 0.5,
  stroke: "red"
};

const domain = [0, 10];
const defaultValues = [0, 3];

class Slider1 extends Component {
  onUpdate(vals) {
    console.log(vals);
  }
  constructor(props){
    super(props);
    this.state = {
        data: this.props.dataParentToChild1
        
    }
}

  render() {
   //const {data,edit} = this.state;

 console.log(this.state)
    return (
      <div style={{ maxWidth: 600, textAlign: "center" }}>
        <Surface view={view} trbl={trbl}>
          <Slider
            mode={1}
            step={1}
            flatten
            domain={domain}
            component="rect"
            onUpdate={this.onUpdate}
            rootProps={sliderProps}
            values={[0,5]}   //defaultValues
          >
            <Rail>
              {({ getRailProps }) => <SliderRail getRailProps={getRailProps} />}
            </Rail>
            <Ticks>
              {({ ticks, getHandleProps }) => (
                <g transform={`translate(0,${dims[1]})`}>
                  {ticks.map(tick => (
                    <Tick key={tick.id} tick={tick} />
                  ))}
                </g>
              )}
            </Ticks>
            <Tracks left={false} right={false}>
              {({ tracks, getTrackProps }) => (
                <g transform={`translate(0,${dims[1] / 2})`}>
                  {tracks.map(({ id, source, target }) => (
                    <Track
                      key={id}
                      source={source}
                      target={target}
                      getTrackProps={getTrackProps}
                    />
                  ))}
                </g>
              )}
            </Tracks>
            <Handles>
              {({ handles, getHandleProps }) => (
                <g transform={`translate(0,${dims[1] / 2})`}>
                  {handles.map(handle => (
                    <Handle
                      key={handle.id}
                      handle={handle}
                      domain={domain}
                      getHandleProps={getHandleProps}
                    />
                  ))}
                </g>
              )}
            </Handles>
          </Slider>
        </Surface>
      </div>
    );
  }
}

export default Slider1;

Answer 1

主要问题是您将道具值 dataParentToChild1 存储在子组件 state 中，这仅在构造函数中完成，并且仅调用一次。每次重新渲染组件时都不会调用构造函数（例如，当 prop 值更改时）。

在这种情况下，您也不需要像那样将 prop 存储在本地状态。相反，只需使用 prop 值。因此，在滑块组件中，删除状态，并在 render 中使用 console.log(this.props.dataParentToChild1) 检查，每次在父级中更新时，您应该会看到值发生变化。

将数据传递给 child 组件，可以通过单击按钮进行切换

Pass data to child component that can be toggled with button click

reactjs

parent-child

react-props