Question

我是ReactJS的新手，我想在组件之间进行通信。当我单击“ ChildA”中的图像时，我想更新“ ChildB”中的正确项目图像（ChildA中的type属性只能是“ itemone”，“ itemtwo”，“ itemthree” 这是它的样子

Parent.js

my_list = [[
'switchport port-security maximum 10', 
'switchport port-security maximum 3 vlan access', 
'switchport port-security maximum 1 vlan voice', 
'switchport port-security aging time 25', 
'switchport port-security aging type inactivity', 
'switchport port-security'
], [
'switchport port-security maximum 5', 
'switchport port-security maximum 5 vlan access', 
'switchport port-security maximum 3 vlan voice', 
'switchport port-security aging time 20', 
'switchport port-security aging type inactivity', 
'switchport port-security'
], [
'switchport port-security maximum 10', 
'switchport port-security maximum 3 vlan access', 
'switchport port-security maximum 1 vlan voice',  
'switchport port-security'
]]

result = []
for sub_list in my_list:
    if all([True if any([config in item for item in sub_list]) else False for config in list1]):
        result.append(True)
    else:
        result.append(False)

#[True, True, False]

ChildA.js

export default class Parent extends Component {
    render() {
        return (
            <div className="mainapp" id="app">
                    <ChildA/>
                    <ChildB/>
            </div>

        );
    }
}

if (document.getElementById('page')) {
    ReactDOM.render(<Builder />, document.getElementById('page'));
}

ChildB.js

render() {
    return _.map(this.state.eq, ecu => {
        return (

             <img src="../images/misc/ec.png" type={ecu.type_eq} onClick={() => this.changeImage(ecu.img)}/>
        );
    });
}

我可以在ChildA中的onClick处理程序上检索图像，但是我不知道如何将其提供给ChildB。任何提示都欢迎，谢谢！

Answer 1

您需要的是Parent将事件处理程序传递给ChildA，单击其中一个图像时，ChildA将调用该事件处理程序。事件处理程序将调用Parent中的setState以给定的值更新其状态，然后Parent将通过其render方法将该值向下传递给ChildB。

您可以在下面的示例中看到它的工作。由于我没有任何实际的图像可以使它简单化，因此我使用了<button>，但是原理是相同的。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedItem: 'none',
    };
  }
  
  render() {
    return (
      <div>
        <ChildA onClick={this.handleChildClick}/>
        <ChildB clickedItem={this.state.clickedItem}/>
      </div>
    );
  }
  
  
  handleChildClick = clickedItem => {
    this.setState({ clickedItem });
  }
}

const items = ['item1', 'item2', 'item3'];

const ChildA = ({ onClick }) => (
  <div>
    {items.map(name => (
      <button key={name} type="button" onClick={() => onClick(name)}>
        {name}
      </button>
    ))}
  </div>
);

const ChildB = ({clickedItem}) => (
  <p>Clicked item: {clickedItem}</p>
);

ReactDOM.render(<Parent/>, document.querySelector('div'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script>
<div></div>

兄弟姐妹之间轻松传达图像

1 个答案: