Question

这可能是某个问题的两倍，但我找不到具体问题的答案。我有以下代码：

从'react'

导入React，{Component}

class FAQContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            opened: false,
        };
        this.toggleBox = this.toggleBox.bind(this);
    }

    toggleBox() {
        const { opened } = this.state;
        this.setState({
            opened: !opened,
        });
    }
    render() {
        return (
            <div>
                <div className="question">
                    <div className="question-title" onClick={this.toggleBox}>
                        Title 1
                </div>
                    {this.state.opened && (
                        <div class="answer">
                        Content 1
                    </div>
                    )}
                </div>
                <div className="question">
                    <div className="question-title" onClick={this.toggleBox}>
                        Title 2
            </div>
                    {this.state.opened && (
                        <div class="answer">
                        Content 2
                </div>
                    )}
                </div>
            </div>
        )
    }
}

export default FAQContent

这会产生2个问题标题。但是，当我点击任何问题时，会触发所有问题的状态更改。在没有显示其余组件的情况下，显示问题的具体答案的最有效方法是什么？

Answer 1

$('#wrapper_page_desktop_content').html( '<?php json_encode(file_get_contents(app_dir . 'template/desktop/content/corporate01/test.php')); ?>' );

Example

Answer 2

您使用相同的状态来控制不同的部分。如何创建一个新的问题组件并让它来管理自己的状态，并使用FAQContent组件中的问题组件。

问题部分：

export default class Question extends Component {
  state = { opened: false };

  toggleBox = () => this.setState(state => ({ opened: !state.opened }));

  render() {
    return (
      <div className="question">
         <div className="question-title" onClick={this.toggleBox}>
             {this.props.title}
         </div>
         {this.state.opened && (
            <div class="answer">
               {this.props.content}
            </div>
          )}
       </div>
    );
  }
}

FAQContent组件：

const FAQContent = () => (
  <div>
    <Question title="title 1" content="content 1" />
    <Question title="title 2" content="content 2" />
  </div>
);
export default FAQContent;

React Native：在点击时显示/隐藏元素

2 个答案: