Question

我想在点击private void btnOpen_Click(object sender, EventArgs e) { openFolder.Description = "Open a folder containing pictures for the slideshow!"; if (openFolder.ShowDialog() == DialogResult.OK) { // this code right here string folderPath = openFolder.SelectedPath; string[] fileArray = Directory.GetFiles(folderPath, "*.JPG"); foreach (string file in fileArray) { folderPath = folderPath + "\\" + file; float duration = 4; float startpos = 0; timelineControl.AddImageClip(timelineControl.GetImageTrackIndex(), folderPath, startpos, (startpos + duration)); startpos = startpos + 4; } /* string image = "C:\\Users\\OSR\\Desktop\\jpgs\\img.JPG"; float duration = 4; timelineControl.AddImageClip(timelineControl.GetImageTrackIndex(), image, 0, duration); */ } else { MessageBox.Show("Next time, select a folder and click open!", "Selection Cancelled", MessageBoxButtons.OK, MessageBoxIcon.Error); } }时呈现BlackSpark，但我不确定如何更改其他组件中组件的状态。我知道如何在组件本身中设置状态，但是当我单击其他组件时如何影响另一个组件？

RedSpark

Answer 1

在React中，您已经接受了component composition的概念 - 它允许您通过根据父母的状态渲染孩子来实现您想要的目标，另一个关键概念称为lifting state up。这意味着，如果你有相互依赖的组件，创建一个组成它们的单个父组件，并在父控件中具有子组件的表示和逻辑。使用父App，您可以将状态保留在App 内，并基于App的状态，conditionally render无论您身在何处想要 - BlackSpark或两者兼而有之。例如，使用the logical && operator：

{condition && <Component />}

这只会在<Component>真实时呈现condition，否则根本不呈现任何内容（condition为0时除外）。将其应用于此情况，请尝试向您的App组件添加状态以利用条件呈现。

您还需要了解另一个关键概念：component props。它们本质上是对组件的输入，某些 prop erties传递给组件以告诉它应该如何表现 - 就像常规HTML元素（如输入占位符，URL和事件处理程序）上的属性一样。例如：

<Component foo="bar" bar={3} />

这会将道具foo和bar分别传递给Component，其值分别为"bar"和3，可通过this.props访问。如果您要访问this.props.foo组件中的Component，它会为您提供"bar"。如果你将它与构图配对，你可以完成你想要的任务：

＆＃13;

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      showHello: true
    }
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange() {
    this.setState(prevState => ({
      showHello: !prevState.showHello
    }));
  }

  render() {
    return (
      <div>
        {this.state.showHello && <Child2 />}
        This is a test.
        <Child1 onClick={this.handleChange} />
      </div>
    );
  }
}

class Child1 extends React.Component {
  render() {
    return <div onClick={this.props.onClick}>Click me!</div>
  }
}

class Child2 extends React.Component {
  render() {
    return <div>Hello!</div>
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

以上示例通过让父母组成子女并维持状态来解除状态。然后，它使用props将onClick处理程序传递给Child1，这样只要点击Child1，父级的状态就会更改。一旦父级的状态发生变化，如果条件是真实的，它将使用条件渲染来渲染<Child2>。请继续阅读the React documentation和the logical && operator。

Answer 2

我知道如何在组件本身中设置状态，但是当我点击其他组件时如何影响另一个组件呢？

建议的方法是创建具有状态的父组件。然后，您将使用该状态来确定何时呈现其他子组件。

我想在点击RedSpark时渲染BlackSpark，但我不知道如何更改另一个组件中组件的状态。另外，如果我想在点击GreenSpark并且GreenSpark在BlackSpark中时隐藏BlackSpark会怎么样？

在这种情况下，您可以按照以下方式进行操作。

const GreenSpark = ({ onClick }) => (
  <button className="green" onClick={onClick}>X</button>
)

const BlackSpark = ({ onClick }) => (
  <div className="black">
    <GreenSpark onClick={onClick} />
  </div>
)

const RedSpark = ({ onClick }) => (
  <div className="red" onClick={onClick}></div>
)

class Spark extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showBlack: false
    }

    this.boundShowBlack = this.showBlack.bind(this)
    this.boundHideBlack = this.hideBlack.bind(this)
  }

  showBlack() {
    this.setState({ showBlack: true })
  }

  hideBlack() {
    this.setState({ showBlack: false })
  }

  render() {
    return (
      <div>
        <RedSpark onClick={this.boundShowBlack} />
        {this.state.showBlack && <BlackSpark onClick={this.boundHideBlack} />}
      </div>
    )
  }
}

单击另一个组件时渲染组件

2 个答案: