Question

我正在使用create-react-app创建一个简单的应用

并且正在探索使用React Context API将少量内容从一个组件传递到另一组件。

Spice.js

const spiceList = [
  {
    id: 1,
    title: 'Spice 11',
    name: require('./images/spice1.jpeg')
  },
  {
    id: 2,
    title: 'Spice 22',
    name: require('./images/spice2.jpeg')
  }

];

return (
  <div>
    <h1>Welcome to Spices</h1>

 <SpiceContext.Provider value={'Masala'} imgSrc={img3}>
    <SpiceList/>
 </SpiceContext.Provider>
    </div>
  </div>
);

} }

导出默认Spice；

SpiceList中的消费者我计划在其中检索多个属性而不是单个值属性。

这如何实现？谢谢

<>
                    <h1>{props.title}</h1>
                    <SpiceContext.Consumer>
                      {spiceContext=> <img src={spiceContext.value} alt={spiceContext.title}/>
                      }
                    </SpiceContext.Consumer>
      </>

SpiceContext

import React from 'react';

const SpiceContext = React.createContext（null）;

导出默认SpiceContext；

Answer 1

首先创建您要共享的对象。

return (
      <div>
        <h1>Welcome to Spices</h1>

     <SpiceContext.Provider value={myOptions} imgSrc={img3}>
        <SpiceList/>
     </SpiceContext.Provider>
        </div>
      </div>
    );

然后将其传递下去。

<h1>{props.title}</h1>
<SpiceContext.Consumer>
  {(options) => (
    <>
      {options.map((option) => (
        <img key={option.key} src={option.other} alt={option.title}/>
      ))}
    </>
  )}
</SpiceContext.Consumer>

然后，您将以相同的方式收到这些邮件：

<api xmlns="http://ws.apache.org/ns/synapse" name="API_Name" context="/APIBasePath" version="1.0.0" version-type="context">
   <resource methods="POST" url-mapping="/samplePath">
      <inSequence>
         <payloadFactory media-type="xml">
            <format>
               <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns="http://fcubs.ofss.com/service/FCUBSCcyService">
                  <soapenv:Body>
                     <RATESMASTERQUERY_IOFS_REQ>
                        <FCUBS_HEADER>
                           <SOURCE>$1</SOURCE>
                           <UBSCOMP>$2</UBSCOMP>
                           <USERID>$3</USERID>
                           <BRANCH>$4</BRANCH>
                           <SERVICE>FCUBSCcyService</SERVICE>
                           <OPERATION>$5</OPERATION>
                        </FCUBS_HEADER>
                        <FCUBS_BODY>
                           <Rates-Master-IO>
                              <BRNCODE>$4</BRNCODE>
                              <CCY1>$6</CCY1>
                              <CCY2>$7</CCY2>
                           </Rates-Master-IO>
                        </FCUBS_BODY>
                     </RATESMASTERQUERY_IOFS_REQ>
                  </soapenv:Body>
               </soapenv:Envelope>
            </format>
            <args>
               <arg xmlns:ns="http://org.apache.synapse/xsd" evaluator="xml" expression="$trp:Source"/>
               <arg value="FCUBS"/>
               <arg xmlns:ns="http://org.apache.synapse/xsd" evaluator="xml" expression="$trp:userid"/>
               <arg xmlns:ns="http://org.apache.synapse/xsd" evaluator="xml" expression="$ctx:brncode"/>
               <arg xmlns:ns="http://org.apache.synapse/xsd" evaluator="xml" expression="$trp:function"/>
               <arg xmlns:ns="http://org.apache.synapse/xsd" evaluator="xml" expression="$ctx:ccy1"/>
               <arg xmlns:ns="http://org.apache.synapse/xsd" evaluator="xml" expression="$ctx:ccy2"/>
            </args>
         </payloadFactory>
         <property name="messageType" value="text/xml" scope="axis2"/>
         <log level="full"/>
         <send>
            <endpoint>
               <address uri="http://www.mocky.io/v2/5185415ba171ea3a00704eed" format="soap11"/>
            </endpoint>
         </send>
      </inSequence>
      <outSequence>
         <respond/>
      </outSequence>
   </resource>
</api>

如何通过React Context（从使用者到提供者）传递多个参数？

1 个答案: